프로그래밍 언어발행일 2022. 11. 23.원본 https://blog.naver.com/jword_/222936646273 ↗

Javascript ScrollMagic 사용하기

Javascript ScrollMagic 사용하기 — #javascriptscrollmagic #스크롤매직 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가...

#Languages#Naver Blog

#javascriptscrollmagic #스크롤매직

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 크롬을 통해 copy and paste하라

이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

4.새로운 지식을 넣을땐 뇌를 비우자

JavaScript ScollMagic

홈페이지 트렌드 : 스크롤 애니메이션

요즘 홈페이지 제작 트랜드중 하나로 스크롤애니메이션을 빼놓을 수 없습니다. 스크롤 애니메이션은 스크롤 Viewport에 따라 특정 요소들에 css속성을 변경하여 애니메이션 효과를 줄 수 있습니다.

스크롤 애니메이션을 적용하여 홈페이지를 만들면 세련되고 트렌디한 홈페이지 제작이 가능합니다. 이 홈페이지는 고객에게 긍정적인 인상을 줘 신규고객 유입 및 기존고객유치에 큰 도움을 얻을 수 있습니다.

JavaScript ScrollMagic

스크롤 애니메이션을 적용하는 방법은 많겠지만, 오늘은 개인적으로 가장 적용하기 편하다고 생각되는 자바스크립트 ScroolMagic라이브러리를 사용해볼까 합니다.

기존에 스크롤 애니메이션을 적용시키기 위해 gsap-scrollTrigger를 사용했지만, 초보자가 접근하기에는 덜 직관적이고 오랜 학습이 필요하다는 것을 깨달았습니다. 그러다 ScrollMagic을 사용해봤는데, 개인적으로 훨씬 더 직관적이고 사용이 편리합니다.

특징은 css class만로 애니메이션을 구현시키기 쉽습니다.

ScrollMagic CDN

ScrollMagic CDN

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

현재 (22.11.23)를 기준으로 가장 최신버전의 CDN코드입니다. 위 코드를 html 맨아래 넣어주시면됩니다.

ScrollMagic 적용하기

html

ScrollMagic사용을 위해 html로 여러개의 박스를 만들었습니다.

<body> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> </body>

ScrollMagic은 class를 줬다 없애는 형식으로 편하게 애니메이션 구현이 가능합니다.

ScrollMagic

이제 scroll-spy클래스를 지정하겠습니다. 지정하기 위해서는 애니메이션 요소가 아닌 부모요소에 class를 주어야합니다.

<body> <section class="position1 scroll-spy"> <div class="box box1"></div> </section> <section class="position2 scroll-spy"> <div class="box box2"></div> </section> <section class="position3 scroll-spy"> <div class="box box3"></div> </section> <section class="position4 scroll-spy"> <div class="box box4"></div> </section> </body>

기존의 box를 section으로 감싸줍니다. 보통 홈페이지를 만들때 section별로 구분하는데 그것과 같은 개념으로 생각하시면 좋습니다.

const spyEls = document.querySelectorAll("section.scroll-spy"); *//**요소의 부모에 달아주기console.log(spyEls);spyEls.forEach(function (spyEl) { new ScrollMagic.Scene({ triggerElement: spyEl, //**trigger가 되는 요소 (감시요소) triggerHook: 0.8, //**viewport기준 0:최상단 1은 최하단 hook 0.8은 뷰포트기준 0.8 애니메이션 실행 }) .setClassToggle(spyEl, "show") //**spyEl요소에 "show" class를 추가 //요소의 부모에 지정* .addTo(new ScrollMagic.Controller());});

우리가 지정한 section.scroll-spy는 윈도우가 감시하는 영역입니다. 이 영역이 화면에 등장하면 클래스를 변경시켜 애니메이션이 구형되도록 설정합니다.

forEach(배열에서)문을 사용하여 모든 section을 spyEl로 담아줍니다. 이후 스크롤이 viewPort기준 0.8(0:시작 1:끝)이 되면 해당 section에 "show"클래스가 붙어 애니메이션이 실행됩니다.

속성변경

CSS/SCSS

이제 모든박스에 .back-to-position속성을 넣어 감춰져있는 상태에서 class=show가 생기면 좌/우로 등장하는 애니메이션을 구현해보겠습니다. (scss형식으로 작성된 코드입니다)

.back-to-postion { opacity: 0; transition: 1s; &.to-right { transform: translateX(-150px); } &.to-left { transform: translateX(150px); }}.show .back-to-postion { opacity: 1; transform: translateX(0);}

.back-to-position이 붙은 class는 모드 감춰두고, 추가로 to-right속성이 붙은 box는 좌측으로 보내두고, to-left속성이 붙은 함수는 우측으로 보낸뒤 section.show가 추가되면 좌/우로 이동하는 애니메이션이 실행됩니다. (html box에 class를 모두 추가하십시오)

스크롤이 이동함에따라 box에 애니메이션이 적용되는 것을 볼 수 있습니다.