반응형

 

 

ScrollMagic

Let's start showing off some magic

 

이전 포스팅이 ScrollMgic 라이브러리의 '메서드와 옵션' 에 대한 내용이 주요 내용이었다면,

이번에는 ScrollMgic 라이브러리의 메서드 전역(global) 설정 방법과 실무에서 쓸만한 예제를 몇 가지 만들어 보여 드리고자 합니다.

이전 편에서  ScrollMgic 라이브러리의 '메서드와 옵션'을 잘 이해하고 이번 포스팅을 보신다고 생각하여,

설명드렸던 메서드와 옵션의 관련 내용은 중복하여 작성하지 않겠습니다.

 

 

 

 

 

ScrollMagic - Controller 옵션

 

ScrollMagic 애니메이션을 실행하기 위한 Controller 메서드 옵션은 두 가지가 있습니다.

그것들을 알아보고 ScrollMagic 실무 적용할 만한 예제들을 알아보도록 하겠습니다.

 

 

globalSceneOptions

실무 웹퍼블리싱에서는 한 개의 프로젝트에서 ScrollMagic 애니메이션을 만들 때, 한 개를 구현하는 것이 아니라

2개 혹은 여러 개를 구현하게 될 상황이 자주 발생할 것이며 이에 따라 Scene을 여러 개 생성해야 합니다.

그렇다면 동일한 Scene 옵션을 반복해서 작성하지 않고, 스크롤 애니메이션 공통 요소는 한 번만 선언해서 사용하는 전역 설정 방법이 없을까요?

당연히 있지만 모르고 사용하지 않는 상황이 발생할 것입니다.

ScrollMagic 메서드 옵션 전역(global) 설정 문법은 간단합니다.

전역(global) 설정 옵션 문법 :  globalSceneOptions: Scene 옵션(duration, reverse, triggerHook, offset) 

var controller = new ScrollMagic.Controller({
	globalSceneOptions: {
		triggerHook: 'onLeave',
		duration: "100%"
	}
});

 

 

container

HTML에서 Body 영역에서 스크롤 시 trigger가 발생하는 것이 아닌, 지정한 container 영역 내부에서 스크롤 애니메이션이 동작하도록 만들 수 있습니다.

특정 영역 내부 스크롤 애니메이션 설정 옵션 문법 :  container: "컨테이너 명(ID 또는 Class)" 

var controller = new ScrollMagic.Controller({
	container: '#container'	//body 스크롤이 아닌, 컨테이너 내부 스크롤 컨트롤	
});

  ScrollMagic - 'Container Scroll' 예제 실습 파일  

scrollmagic-9-container-scroll.zip
0.00MB

 

 

 

 

 

ScrollMagic Examples Site

 

ScrollMagic 공식 사이트에서는 예제를 제공하고 있습니다.

본격적인 ScrollMagic 섹션 와이프(Section Wipe)와 실무 응용 예제 글 작성에 앞서서 공식 예제 사이트를 공유해 드리고자 합니다.

이유는 ScrollMagic 공식 사이트의 예제까지 모두 섭렵하신다면,

ScrollMagic 라이브러리를 더욱 완벽하게 이해하고 사용하실 수 있으리라고 생각되기 때문입니다.

 

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

 

 

 

 

 

Section Wipe

 

보여드릴 하위 예제는 모두 섹션 와이프(Section Wipe) 종류입니다.

섹션 와이프는 스크롤 시 다음 섹션이 나타나 화면에 고정되는 동작이며, 예제는 모두 다르게 보이지만 구현 원리는 모두 비슷합니다.

  • 1. CSS로 Section DIV의 width: 100%, height: 100% 값을 설정하여 화면을 꽉 차게 만들어 줍니다.
  • 2. Section Div의 Scene들의 triggerHook은 공통 옵션으로써 controller에서 global option으로 설정해 줍니다.
  • 3. 각각의 Section Div가 스크롤 시 시작되는 부분에 닿았을 때 trigger 되어야 하기 때문에 TriggerHook의 값은 'onLeave' 또는 '0' 으로 작성합니다. 
  • 4. Section Div가 스크롤될 때마다 triggerHook에 닿으면 setPin 메서드를 사용하여 고정시켜 줍니다.

 

 

Section Wipe(기본형)

  ScrollMagic - 'Section Wipe(기본형)' 예제 실습 파일  

scrollmagic-6-section-wipe.zip
0.00MB

 

 

Section Wipe(응용형)

  ScrollMagic - 'Section Wipe(응용형)' 예제 실습 파일  

scrollmagic-7-section-wipe.zip
0.00MB

 

 

Section Wipe(슬라이더)

  ScrollMagic - 'Section Wipe(슬라이더)' 예제 실습 파일  

scrollmagic-8-section-wipe.zip
0.00MB

 

 

 

 

 

ScrollMagic 실무 응용 예제

 

실무에서 자주 사용되는 스크롤 애니메이션을 몇 가지 소개하고자 합니다.

예제 위주로 되어있으며 이전 포스팅 내용들을 잘 학습하셨다면, 쉽게 이해하고 사용하실 수 있을 것입니다.

 

 

Fade-In, Fade-Out(기본형)

  ScrollMagic - 'Fade-In, Fade-Out(기본형)' 예제 실습 파일  

scrollmagic-experiment-service1.zip
0.00MB

 

 

Fade-In, Fade-Out(응용형)

  ScrollMagic - 'Fade-In, Fade-Out(응용형)' 예제 실습 파일  

scrollmagic-experiment-service2.zip
0.00MB

 

 

 

 

 

마치며...

 

최초 ScrollMagic 라이브러리 포스팅은 메서드와 옵션까지만 작성하려다가 마음을 고쳐먹고 실무에 쓸만한 예제까지 만들기로 하였습니다.

예제를 여러 개 만들어서 보여드리면 ScrollMagic 라이브러리의 매력을 한 명이라도 더 알지 않을까 하는 마음에서 입니다.

저의 노력이 헛되지 않았으면 좋겠습니다 :D

다음 편은 ScrollMagic 라이브러리의 최종 편으로서,이번 포스팅은 서브페이지 디자인에 ScrollMagic 라이브러리의 실무 적용 방법이라고 할 수 있다면,

다음 포스팅은 지금까지 모든 내용을 총집합 한 내용으로 메인에서도 쓸만한 퍼포먼스가 높은 예제로 보여드리고 마무리하겠습니다. 

 

감사합니다.

 

 

반응형

+ Recent posts