You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

111 lines
3.1 KiB

var c = document.getElementById("c"),
ctx = c.getContext("2d"),
maskCanvas = document.createElement("canvas"),
maskCtx = maskCanvas.getContext("2d");
var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight
orb = new Image(300, 300),
img = new Image(height, width)
// $("canvas").css({width:height,height:width})
img.src = "img/5.jpg";
orb.src = "img/orb.png";
goanimate()
function goanimate(){
cw = (maskCanvas.width = c.width = img.width),
ch = (maskCanvas.height = c.height = img.height),
console.log(cw, ch);
ratio = ch / cw,
mainTL = new TimelineMax({
paused: true
}),
particles = [],
Particle = function (index, x, y) {
this.x = x;
this.y = y;
this.draw = function () {
maskCtx.translate(this.x, this.y);
// maskCtx.globalAlpha = this.progress;
maskCtx.drawImage(orb, -this.size / 2, -this.size / 2, this.size, this.size);
// maskCtx.globalAlpha = 1;
maskCtx.translate(-this.x, -this.y);
}
mainTL.add(new TimelineMax().fromTo(this, rand(1.1, 2.8), {
progress: 0,
size: 200,
x: "+=" + rand(-50, 50),
y: "+=" + rand(-50, 50)
}, {
x: "+=" + rand(cw / 2, cw),
size: 0,
progress: 1,
ease: Power4.easeIn //ease:Power0.easeNone
}), 0);
};
// populate particles
var pI, pX, pY;
for (pX = pI = 0; pX < cw; pX += 100) {
for (pY = 0; pY < ch; pY += 100) {
pI++;
particles.push(new Particle(pI, pX, pY));
}
}
TweenMax.ticker.addEventListener('tick', updateStage); // redraw canvas upon each 'tick'
// c.addEventListener('click', function(e){
mainTL.play();
TweenMax.delayedCall(3, function () {
TweenMax.ticker.removeEventListener('tick', updateStage);
}); // ...and stop 'tick' updates
// });
function updateStage() {
console.log('ticking...')
//update mask
maskCtx.clearRect(0, 0, cw, ch);
for (var i = 0; i < particles.length; i++) particles[i].draw();
//update visible canvas
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, cw, ch);
ctx.drawImage(img, 0, 0, cw, ch);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(maskCanvas, 0, 0);
}
function doResize() {
//proportional scale
if (window.innerHeight / window.innerWidth < ratio) TweenMax.set(c, {
transformOrigin: '0 0',
scale: (window.innerWidth * ratio) / img.height
});
else TweenMax.set(c, {
transformOrigin: '0 0',
scale: (window.innerHeight / ratio) / img.width
});
// center positioning
var data = c.getBoundingClientRect();
TweenMax.set(c, {
x: window.innerWidth / 2 - data.width / 2,
y: window.innerHeight / 2 - data.height / 2
});
}
// window.addEventListener('resize', doResize);
// doResize(); //also called when #container fades in...
function rand(min, max) {
(min) ? min = min: min = 0;
(max) ? max = max: max = 1;
return min + (max - min) * Math.random();
}
}
setTimeout(function () {
img.src = "img/6.jpg";
$("canvas").css("background", "url(./img/7.jpg)",);
$("canvas").addClass('threeanimate')
goanimate()
},2600)