Падающие осенние листья на TreeCanvas
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.dot{ width:35px; height:35px; position:absolute; background: url(/img/red-lobed-fall-clipart-leaf.png); background-size: 100% 100%; } #container { width:100%; height:100%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="container"></div> <script src='/js/TweenMax.min.js'></script> <script > /* a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW powered by GSAP : https://www.greensock.com/ */ TweenLite.set("#container",{perspective:600}) TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"}) var total = 30; var warp = document.getElementById("container"), w = window.innerWidth, h = window.innerHeight; for (i=0; i<total; i++){ var Div = document.createElement('div'); TweenLite.set(Div,{attr:{class:'dot'},x:R(0,w),y:R(-200,-150),z:R(-200,200)}); warp.appendChild(Div); animm(Div); } function animm(elm){ TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15}); TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut}); TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5}); }; function R(min,max) {return min+Math.random()*(max-min)}; // a Pen by DIACO : twitter.com/Diaco_ml || codepen.io/MAW </script> |
