[Motion] Scroll Motion

혹시 몰라서! 필요한 cdn들 추가해놓기!

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

 

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> <!--indicators-->

---

Duration

스크롤에 따라 모션 주어지는 기능

var 변수 = new ScrollMagic.Controller({});

scene = new ScrollMagic({ triggerElement : (위치css), offset : (값 +-), duration : (주로 적용되는 height값) })

          .addTo(어떤거를?)

          .setTween(모션값)

          .reverse(true/false)

 

Indicators

스크롤이벤트, 트리거 위치 출력해줌

var 변수 = new ScrollMagic.Controller({});

scene = new ScrollMagic({ triggerElement : (위치css), offset : (값 +-), duration : (주로 적용되는 height값) })

          .addTo(어떤거를?)

          .setTween(모션값)

          .reverse(true/false)

          .addIndicators()

그리고 script cdn추가

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>