Skip to content

Instantly share code, notes, and snippets.

@pmaojo
Created October 4, 2019 14:07
Show Gist options
  • Save pmaojo/fd847778f5dc94d89ad2792cb92f752c to your computer and use it in GitHub Desktop.
Save pmaojo/fd847778f5dc94d89ad2792cb92f752c to your computer and use it in GitHub Desktop.
Autumn falling leaves ( GSAP )
<div id="container">
</div>
/* a Pen by Diaco m.lotfollahi : https://diacodesign.com */
var falling = true;
TweenLite.set("#container",{perspective:400})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-20%"})
var total = 8;
var container = 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' + i},x:R(0,w),y:R(-200,-150),z:R(-200,200)});
container.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 m.lotfollahi : https://diacodesign.com */
<script src="https://codepen.io/MAW/pen/XVRpEE"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
body{
background-color: #111;
font-family: Signika Negative, Asap, sans-serif;
color:white;
overflow:hidden;
}
.dot1{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
background-size: 100% 100%;
}.dot2{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja1.png);
background-size: 100% 100%;
}.dot3{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja3.png);
background-size: 100% 100%;
}.dot5{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja1.png);
background-size: 100% 100%;
}
.dot4{
width:50px;
height:40px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja4.png);
background-size: 100% 100%;
}
.dot6{
width:40px;
height:20px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
background-size: 100% 100%;
}
.dot7{
width:20px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
background-size: 100% 100%;
}
.dot0{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
background-size: 100% 100%;
}
.dot8{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja4.png);
background-size: 100% 100%;
}
.dot9{
width:60px;
height:50px;
position:absolute;
background: url(http://clientests.com/mocay/wp-content/uploads/2019/09/hoja2.png);
background-size: 100% 100%;
}
html, body, #container {width:100%; height:100%; }
#logo{ left:50%; top:50%; position:absolute; border-radius:10px; }
#DiacoDesignLink,#pens{
color: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://codepen.io/MAW/pen/XVRpEE" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment