반응형

 

 

ScrollMagic

Let's start showing off some magic

 

이번 포스팅은 ScrollMgic 라이브러리 '설치방법과 동작 원리' 이어서 이전 포스팅에 설명드리고 간단하게 보여드렸던,

예제를 바탕으로 문법 작성 방법을 순서대로 상세하게 설명드리고,

Scene 옵션에 대해 하나씩 파 해쳐 보도록 하겠습니다.

이전 포스팅에서도 말씀드렸지만 GSAP(TweenMax)로 애니메이션 오브젝트를 구현하기 때문에

GSAP(TweenMax)를 잘 모르실 경우 현재 블로그 포스팅 글 참조 부탁드립니다.

GSAP(TweenMax)는 현재 맑은커뮤니케이션 블로그에 포스팅되어 있기 때문에 따로 진행하지 않겠습니다.

 

 

 

 

ScrollMagic 기본 문법 작성방법

 

기본 문법은 전 편에 설명드렸던 동작원리를 순서대로 작성하시면 쉽습니다.

전 편의 예제 파일을 기본으로 동작원리 순서대로 문법을 세분화하여 공부해 보겠습니다.

 

 

기본 문법 코드 작성방법   

Ⅰ. ScrollMagic 애니메이션을 실행하기 위한 Controller를 생성합니다.

       new 키워드를 이용하여 새로운 인스턴스를 생성합니다.

var controller = new ScrollMagic.Controller();

 

. 스크롤 될때 필요한 애니메이션 오브젝트를 생성합니다.

       GSAP(TweenMax) 라이브러리를 사용하여 애니메이션 코드를 작성합니다.

var tween = TweenMax.to('#animate', 0.5, {
	backgroundColor: "#6431ff",
	scale: 2.5,
	rotation: 360,
	x: 600,
	y: 500
});

 

. ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.

var scene = new ScrollMagic.Scene();

 

. Scene 오브젝트에 어떠한 객체에서 동작해야 할 상세 스크롤(애니메이션 등)을 위한 옵션 설정을 합니다.

       첫째, 어떠한 객체(ex - .trigger 또는 #trigger)에서 Scene 이 발생할지 트리거를 설정해 주어야 합니다. 

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 애니메이션이 발생할지 지정해 주는것 입니다. 

       트리거 설정(Scene 메서드 옵션) :  triggerElement: 'class 또는 ID' 

       둘째, GSAP(TweenMax) 애니메이션 오브젝트()를 Scene 오브젝트()에 추가 설정합니다.

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 발생할 만들어둔 애니메이션 GSAP 오브젝트()를 넣어 줍니다. 

       애니메이션 실행 설정 메서드 :  setTween( ) 

       셋째, 마지막으로 Scene 오브젝트에 ScrollMagic Controller()를 추가하여 실행 설정 하는것 입니다.

       여기까지 오타없이 진행하셨다면, 스크롤에 따라서 애니메이션이 동작합니다. 

       Controller 실행 설정 메서드 :  addTo( ) 

       넷째, 디버깅을 위해서 인디케이터를 추가합니다.

       디버깅 후에는 삭제 합니다.

       디버깅 실행 설정 메서드 :  addIndicators( ) 

 

 

기본 문법 최종코드 및  결과물  

html + css + js + result 최종 결과물 코드 뷰 입니다.

 

 

 

 

 

ScrollMagic Scene 옵션 및 메서드

 

위에 기본 문법을 설명하면서 가장 기본 옵션 이라고 할 수 있는 'triggerElement(scene 메서드 옵션)', 'setTween', 'addTo' 메서드에 대하여 알아보았습니다.

그 외 Scene 옵션 및 메서드에 대하여 설명과 예제를 통해서 공부해 보겠습니다.

 

 

duration( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 재생시간을 나타내는 scene 메서드의 옵션 입니다.

단위는 숫자이며, 예를들어 'duration: 100' 이라고 코드를 작성하면 트리거 시작지점에서 종료지점은 y축으로 100px 스크롤 되는동안 애니메이션이 실행됩니다. 

트리거의 애니메이션 재생시간이 'duration: 100%' 일 경우 화면 높이에 따라 유동적으로 재생시간이 변화합니다.

재생시간 설정 옵션 문법 :  duration: 재생시간 

  ScrollMagic - 'duration' 예제 실습 파일  

scrollmagic-2-duration.zip
0.00MB

 

 

reverse( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 키값을 한번만 실행시키는 scene 메서드의 옵션 입니다.

기본값은 true로 애니메이션의 키값은 스크롤 될때마다 실행되지만, 트리거의 키 값 애니메이션을 한번만 보여주고 싶을 경우에는 값을 false로 설정하면 됩니다.

트리거의 키값을 한번만 실행시키기 위한 옵션 문법 :  reverse: true 또는 false 

  ScrollMagic - 'reverse' 예제 실습 파일  

scrollmagic-2-reverse.zip
0.00MB

 

 

triggerHook( scene  옵션 )

스크롤 시 트리거 팁이 뷰포트에 대해 상대적으로 어느 시점에 애니메이션을 보여줄지 설정하는 scene 메서드의 옵션 입니다.

기본값은 onCenter(0.5)이며, 0 ~ 1 사이의 숫자 또는 문자열로 작성할 수 있습니다.

  • 'onEnter' 1
  • 'onCenter'  0.5
  • 'onLeave'  0

트리거 팁이 어느 시점에 보여야 하는지 설정을 위한 옵션 문법 :  triggerHook: 숫자 또는 문자열 

  ScrollMagic - 'triggerHook' 예제 실습 파일  

scrollmagic-5-triggerHook.zip
0.00MB

 

 

offset( scene  옵션 )

트리거의 애니메이션 시작 지점 트리거를 빠르거나 늦게 동작 시키는 scene 메서드의 옵션 입니다.

기본값은 0 이며, 양수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션을 늦게 동작하며, 음수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션이 빨리 시작됩니다.

예제는 아래 setPin 메서드 설명 후 offset 옵션과 같이 사용하여 보여드리겠습니다.

트리거의 시작 지점을 변경 시키는 옵션 문법 :  offset: 양수 또는 음수 

 

 

setPin   

트리거의 애니메이션 시작지점부터 종료지점까지 요소를 고정시키는 메서드입니다.

재생시간 동안  애니메이션 요소가 fixed 고정 상태가 되며, 애니메이션 재생 지점을 벗어나면  fixed 해제 상태가 되어 스크롤 됩니다. 

요소를 고정시키는 메서드 문법 :  setPin('고정 시키고자 하는 요소의 class 또는 ID') 

  ScrollMagic - 'offset, setPin' 예제 실습 파일  

scrollmagic-3-setPin,offset.zip
0.00MB

 

 

setClassToggle   

트리거의 애니메이션 시작지점부터 종료지점까지 어떠한 대상에 클래스를 넣었다 뺏다(토글)하는 메서드입니다.

애니메이션 재생시간 동안 클래스가 토글되며,  jQuery의 toggleClass와 같다고 생각하시면 됩니다.

대상의 클래스를 토글하는 메서드 :  setClassToggle('클래스 넣어줄 대상', ' 넣어줄 클래스 이름') 

  ScrollMagic - 'setClassToggle' 예제 실습 파일  

scrollmagic-4-setClassToggle.zip
0.00MB

 

 

 

 

 

마치며...

 

ScrollMagic Scene 옵션 및 그 외 메서드에 대하여 모두 알아보았습니다.

이번 포스팅 내용을 잘 이해하셨다면, 웹퍼블리싱 프로젝트에서 왠만한 스크롤 애니메이션은 구현 가능하다고 생각됩니다.

ScrollMagic은 생각보다 외울것도 없고 어렵지도 않습니다.

애니메이션을 위해서 GSAP(TweenMax) 라이브러리와 커스텀 문제만 잘 이해하시면 됩니다.

다음 포스팅은 ScrollerMagic의 controller에서 전역함수처럼 global 설정하는 방법과 응용예제 몇가지를 공부해 보도록 하겠습니다.

 

감사합니다.

 

 

반응형

+ Recent posts