LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS
html, body { 
  padding: 0; 
  margin: 0;
  overflow: hidden;
}
#logo { 
	position: absolute;
  right:0px;
  bottom:0px;
}
JS
var stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", stage);
createjs.ColorPlugin.install();

var colors = ["#ffffff", "#ff7700", "#006699"],
		ratios = [0,0.5,1],
		w = 120, h = 120, // Shape dimensions
		x0 = 0, y0 = 0, x1 = w, y1 = h; // Gradient dimensions

// Create shape
var shape = new createjs.Shape()
		.set({color1: colors[0], color2: colors[1], color3: colors[2]}); // Set initial color values
// Do the fill, and store the command for later
var fillCommand = shape.graphics.beginLinearGradientFill(colors, ratios, x0, y0, x1, y1).command,
    rectCommand = shape.graphics.drawRect(x0, y0, w, h).command;
stage.addChild(shape);

// This sample uses the ColorTween, available in the LATEST TweenJS, version NEXT (which will be 1.0)
var tween = createjs.Tween.get(shape, {bounce:true, loop:true})
		.to({color1:"#990000", color2:"#000000", color3:"#f3797"}, 1000)
    .on("change", function(e) {
      fillCommand.linearGradient([shape.color1, shape.color2, shape.color3], ratios, x0, y0, x1, y1); // Run this every time the tween changes
    });

window.addEventListener("resize", e =>handleResize(e), false);
function handleResize(event) {
  w = x1 = window.innerWidth
  h = y1 = window.innerHeight;
  stage.canvas.width = rectCommand.w = w;
  stage.canvas.height = rectCommand.h = h;
  stage.update();
}
handleResize(null);

Description

Tweening gradients in CSS is easy. In canvas its a little harder. This sample uses the TweenJS ColorFilter to tween colors, and then applies them as a gradient to get the desired effect
Term
Sat, 04/14/2018 - 20:50

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv