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
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)
|