ScrollMagic

animation ui-component

ScrollMagic은 스크롤과 사용자의 인터랙션을 마법처럼 설계할 수 있게 도와주는 자바스크립트 라이브러리입니다. 이를 통해 사용자의 스크롤 동작에 따라 애니메이션 또는 어떠한 동적 변화를 적용할 수 있습니다.

Latest Ver 2.0.8

Homepage

Github

14,960

스크롤이 마법을 부릴 때

스크롤매직으로 각 스크롤에 생명을 불어넣으세요.

ScrollMagic은 사용자의 스크롤에 반응하여 웹사이트에서 동적인 요소를 제어할 수 있도록 돕는 라이브러리입니다.

CDN 다운로드

License: (MIT OR GPL-3.0+)

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.velocity.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.velocity.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/jquery.ScrollMagic.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/jquery.ScrollMagic.min.js

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='example'>
  <p>Hello</p>
</div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

⚙️ JavaScript
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: '#example',
  duration: 300
})
.setPin('#example')
.addTo(controller);