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