이거 떨어지는 속도 조절은 어디서 하나요? 채택완료
4번가
3년 전
조회 1,945
</p>
<p>var falling = true;</p>
<p>TweenLite.set("#container",{perspective:600})
TweenLite.set("img",{xPercent:"-50%",yPercent:"-50%"})</p>
<p>var total = 30;
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'},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});
};</p>
<p>function R(min,max) {return min+Math.random()*(max-min)};
</p>
<p>
https://codepen.io/MAW/pen/KdmwMb
낙엽 떨어지는 속도를 조절하고 싶은데.. 어디를 수정해야하나요?
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
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});
};
여기에서
delay:-15 로 된값을 조절하면서 [ Run] 버튼으로 확인해보세요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
4
4번가
3년 전
delay말고 duration을 늘릴수는 없나요?
댓글을 작성하려면 로그인이 필요합니다.
3년 전
https://greensock.com/docs/v2/TweenLite/timeScale()
</p>
<p> function animm(elm){ </p>
<p> // const scale = 1; // default
const scale = 5;
TweenMax.to(elm,R(6,15),{y:h+100,ease:Linear.easeNone,repeat:-1,delay:-15}).timeScale(scale);
TweenMax.to(elm,R(4,8),{x:'+=100',rotationZ:R(0,180),repeat:-1,yoyo:true,ease:Sine.easeInOut}).timeScale(scale);
TweenMax.to(elm,R(2,8),{rotationX:R(0,360),rotationY:R(0,360),repeat:-1,yoyo:true,ease:Sine.easeInOut,delay:-5}).timeScale(scale);
};</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인