Simple js Footsteps effect with GSAP
A Pen by Steven Morasky on CodePen.
<!-- <div id='winray'><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/183204/winray.png"></div> | |
<div id='desc'> | |
<span>Mind</span><br> | |
The Biggest Jail in the World<br> | |
Where you Lost the passage of Time<br> | |
Where Prisoner is Jailer ! ... | |
</div> --> | |
/* a Pen by Diaco m.lotfollahi : https://diacodesign.com */ | |
var Doc = document , | |
ox = oy = 0 , | |
mDis = 80 , | |
id=0 ; | |
Doc.addEventListener('mousemove',track); | |
Doc.addEventListener('touchmove',track); | |
function track(event){ | |
var e = event.pageX ? event : event.targetTouches[0]; | |
var dis = Math.round(Math.sqrt((ox-e.pageX)*(ox-e.pageX)+(oy-e.pageY)*(oy-e.pageY))), | |
xdiff = e.pageX - ox , ydiff = e.pageY - oy , | |
ang = Math.atan2(ydiff,xdiff)*180/Math.PI; | |
if (dis > mDis) { | |
ox = e.pageX; oy = e.pageY; | |
var ND = Doc.createElement('div'); | |
TweenLite.set(ND,{ | |
className:'foot',rotation:ang,x:e.pageX,y:e.pageY,scaleY:id&1?-1:1,transformOrigin:"50% -70%" | |
}); | |
Doc.body.appendChild(ND); | |
id++; | |
TweenLite.to(ND,5,{opacity:0,onComplete:function(){ | |
this.target.parentNode.removeChild(this.target); | |
}}) | |
} | |
}; | |
/* a Pen by Diaco m.lotfollahi : https://diacodesign.com */ |
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> | |
<script src="https://codepen.io/MAW/pen/XVRpEE"></script> |
@import url(https://fonts.googleapis.com/css?family=Oswald); | |
body{ background-color: #151515; overflow:hidden;} | |
.foot{ | |
width:59px; height:24px; | |
position:absolute; | |
opacity:0.7; | |
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/183204/foot.png"); | |
background-size:100% 100%; | |
} | |
/* #desc{ | |
font-family:'Oswald', tahoma; | |
font-size:20px; | |
white-space: nowrap; | |
position:absolute; | |
transform:translate(-50%,-50%); | |
left:50%; top:50%; | |
text-align:center; | |
color:#ef9e17; | |
font-family:'Oswald', tahoma; | |
mix-blend-mode: color-dodge; | |
} | |
//#desc span{ | |
font-size:10vw; | |
} */ | |
/* #winray{ | |
width:280px; height:400px; | |
position:absolute; | |
top:0px; left:50%; | |
transform:translate(-50%,0%); | |
background-size:100% 100%; | |
opacity:0.4; | |
} */ | |
/* #winray img{ | |
width:100%; height:100%; | |
} */ | |
/*#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" /> |
Simple js Footsteps effect with GSAP
A Pen by Steven Morasky on CodePen.