티스토리 뷰

자바스크립트

scroll Magic plugin & TweenMax 사용법

sosohot 2020. 7. 9. 11:22

스크롤 매직 : 

https://github.com/janpaepke/ScrollMagic

https://nykim.work/30

http://scrollmagic.io/examples/

 

Examples - ScrollMagic

ScrollMagic Examples Let's start showing off some magic... Please note: Most of the examples are not optimized for mobile devices, so the sourcecode can be as simple as possible. The obvious exceptions are the examples on mobile support.

scrollmagic.io

 

[ScrollMagic] 스크롤매직 라이브러리 - 기초편

전부터 계속 써보고 싶었던 ScrollMagic 라이브러리!!! 를 드디어 공부해봅니다 (꺅) 참고한 글은 아래와 같습니다. - Building Interactive Scrolling Websites with ScrollMagic.js [링크] 1. 초기 설정 우..

nykim.work

 

janpaepke/ScrollMagic

The javascript library for magical scroll interactions. - janpaepke/ScrollMagic

github.com

스크롤 매직 치트 시트 : ihatetomatoes.net/wp-content/uploads/2016/08/ScrollMagic-CheatsheetV2.pdf

트윈맥스 : 

http://302chanwoo.com/lab/tween/

 

GSAP 라이브러리

TweenLite.fromTo( box, 1.5, { left:10, height:30 }, { left:800, height:100 } );

302chanwoo.com

http://ghkim2571.dothome.co.kr/animation-gsap/index.html

 

GSAP Animation

웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다. 기존 CSS Animation나 자바스크립트 Animation보다 탁원한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라

ghkim2571.dothome.co.kr

※ 참고로 두개 다 기본은 자바스크립트 라이브러리 입니다. 하지만 둘 다 제이쿼리버전도 지원합니다.

※ 스크롤 매직은 트윈맥스를 사용하여 애니메이션을 만들기 때문에 트윈맥스를 먼저 공부 후 스크롤 매직을 공부하는걸 추천 드립니다. 이렇게 두개만 알고 있어도 웬만한 인터렉션은 가능하네요.

'자바스크립트' 카테고리의 다른 글

Web 애니메이션 라이브러리 로드맵  (0) 2020.09.28
You might not need jQuery  (0) 2020.09.28
Scrolling Background-Image Paralax  (0) 2020.07.07
ES6 자바스크립트 문법 정리  (0) 2020.05.15
jQuery API를 javascript로 바꾸기  (0) 2020.04.24
댓글