ScrollMagic
Let's start showing off some magic
지금까지 ScrollMgic 라이브러리의 사용 방법부터 메서드, 기초 실무예제까지 총 4편의 포스팅을 하였습니다.
이번 포스팅은 ScrollMagic 라이브러리의 마지막으로, 메인 또는 프로모션 사이트에서 스크롤 애니메이션에서 사용할 법한,
조금은 더 화려하고 동적인 예제를 만들어 보여드리고자 합니다.
이전 포스팅 내용들을 확실하게 학습하셨다면, 코드를 분석하시는데 어려울 내용은 없습니다.
그렇기에 특별하게 코드 문법 설명은 없이 작성한 예제 2가지를 보여드릴 것이며, 이렇게도 응용이 가능하구나?
라고 생각하고 편하게 보시면 될 것 같습니다.
ScrollMgic 라이브러리를 웹퍼블리싱 실무에서 재미있게 사용하시길 바랍니다.
ScrollMagic 실무 응용 예제(응용)
이전 포스팅 내용을 바탕으로 실무에서 쓸만한 동적인 스크롤매직 예제 2가지를 보여드리겠습니다.
그렇기에 따로 문법 및 코드설명은 진행하지 않겠습니다.
실무 응용 예제 - Ⅰ
아래 예제는 script.js 파일 내용중 "TweenMax.to('#box', 1, {top:'+=400', width:100, height:100});" 에서 top:'+=400' 값만 잘 이해하시면 됩니다.
상대값을 나타내기 위해서 '+=' 또는 '-='을 문법을 사용합니다.
쉽게 말해서 top:'400' 으로 코드를 작성했다면 상단에서 아래로 400px 지점에 애니메이션 되며 #box 요소가 위치하겠지만, top:'+=400'으로 코드를 작성할 경우
#box 요소의 크기 높이값에 400px을 더한 값이 상단에서 아래로 위치하여 애니메이션이 발생합니다.
ScrollMagic - '실무 응용 예제 - Ⅰ' 예제 실습 파일
실무 응용 예제 - Ⅱ
아래 예제는 script.js 파일 GSAP 내용중 "from($innerS2, 1, {autoAlpha: 0}, '-=0.3');" 에서 '-=0.3' 문법적 의미가 무엇인지 알고 넘어가시면 됩니다.
이전 GSAP에서 포스팅한 내용이 아니기에, 이부분은 다루고 넘어가겠습니다.
'-=0.3' 위치의 문법 코드는 작성하지 않을 경우 기본값은 '0' 이며,
해당 위치에 값을 넣어줄 경우 애니메이션이 빠르게 시작되거나 늦게 시작되도록 설정할 수 있습니다.
'-=0.3' 넣어준 값은 기본값인 '0' 보다 0.3초 빨리 실행하거나, 이전 애니메이션이 끝나기 0.3초전에 겹쳐서 실행하도록 설정하는 것입니다.
ScrollMagic - '실무 응용 예제 - Ⅱ' 예제 실습 파일
마치며...
이번 포스팅은 ScrollMagic 라이브러리 포스팅의 마지막 편으로 무겁지 않게 마무리 했습니다.
화려한(?) 동적 스크롤 애니메이션 응용예제를 2개 간단하게 작성하였고, 가볍게 보시고 따라해 해보시면 될 것 같습니다.
올해도 이제 보름밖에 남지 않았습니다.
제가 올해 초 목표했던 ScrollMagic 라이브러리까지 포스팅하게 되어 일단 기분이 너무 좋습니다.
다들 올 한해 목표했던 학습목표까지 이루셨는지 한번쯤 돌아보시고,
조금 부족하셨다 싶으시면 '맑은커뮤니케이션 '블로그를 통해서 그 목표에 조금이라도 더 가까이 도달하시길 바랍니다.
모두 힘내시고 웹퍼블리싱 공부 및 프로젝트에서 목표했던 바를 이루시길 바랍니다.
감사합니다.
'javascript' 카테고리의 다른 글
[ Yarn - Package Manager ] 설치 및 사용방법(사용 가이드) (0) | 2022.05.19 |
---|---|
[ScrollMagic] 스크롤매직 라이브러리 - Controller 옵션, 실무 응용 예제 (제 3편) (0) | 2021.12.08 |
[ScrollMagic] 스크롤매직 라이브러리 - 기본 문법 및 메서드, 옵션 (제 2편) (0) | 2021.11.29 |
[ScrollMagic] 스크롤매직 라이브러리 - 설치 방법 및 동작 원리 (제 1편) (0) | 2021.11.25 |
[Swiper Slider] 페이징(pagination) 2개 적용 방법 (0) | 2021.11.22 |