반응형

 

 

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 - '실무 응용 예제 - Ⅰ' 예제 실습 파일  

scrollmagic-animation-scroll-last1.zip
0.00MB

 

 

실무 응용 예제 -

아래 예제는 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-animation-scroll-last2.zip
0.00MB

 

 

 

 

 

마치며...

 

이번 포스팅은 ScrollMagic 라이브러리 포스팅의 마지막 편으로 무겁지 않게 마무리 했습니다.

화려한(?) 동적 스크롤 애니메이션 응용예제를 2개 간단하게 작성하였고, 가볍게 보시고 따라해 해보시면 될 것 같습니다.

올해도  이제 보름밖에 남지 않았습니다.

제가 올해 초 목표했던 ScrollMagic 라이브러리까지 포스팅하게 되어 일단 기분이 너무 좋습니다.

다들 올 한해 목표했던 학습목표까지 이루셨는지 한번쯤 돌아보시고,

조금 부족하셨다 싶으시면  '맑은커뮤니케이션 '블로그를 통해서 그 목표에 조금이라도 더 가까이 도달하시길 바랍니다.

모두 힘내시고 웹퍼블리싱 공부 및 프로젝트에서 목표했던 바를 이루시길 바랍니다.

 

감사합니다.

 

 

반응형
반응형

 

 

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 라이브러리의 실무 적용 방법이라고 할 수 있다면,

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

 

감사합니다.

 

 

반응형
반응형

 

 

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 설정하는 방법과 응용예제 몇가지를 공부해 보도록 하겠습니다.

 

감사합니다.

 

 

반응형
반응형

 

 

ScrollMagic

Let's start showing off some magic

 

웹퍼블리싱 프로젝트를 하다 보면 고객사의 요청에 의해 스크롤에 따른 애니메이션(동적인 화면)을 구현해야 할 경우가 있습니다.

완성도 높고 화려한 메인 페이지를 만들기 위해서 스크롤 애니메이션을 요청하는 경우도 있습니다.

 

저의 경우를 말씀드리자면,

서브페이지의 스크롤 애니메이션 또는 간단한 스크롤 애니메이션은 AOS 라이브러리를 사용하고,

메인 페이지의 완성도 높고 복잡한 스크롤 애니메이션을 구현해야 할 경우

ScrollMagic GSAP(TweenMax)를 이용해서 웹퍼블리싱 합니다.

AOS 라이브러리 사용법은 블로그에 포스팅 되어 있습니다.  

 

이번 포스팅은 ScrollMagic의 설치 방법과 동작 원리

다음 편에는 ScrollMagic 옵션에 대하여 2편으로 나누어 다루어 보겠습니다.

참고로 ScrollMagic을 공부하시려면, GSAP(TweenMax) 라이브러리를 먼저 아셔야 합니다.

블로그에 작성되어 있으며, 어렵지 않으니 걱정하지 마시고 GSAP(TweenMax) 글을 보고 선행학습 부탁드립니다.

 

 

 

 

 

ScrollMagic 설치 방법

 

ScrollMagic 공식 사이트에서 제공하는 라이브러리 사용 방법은 CDN, Bower, NPM, Download 4가지입니다.

포스팅은 CDN 방법으로 진행할 예정이며, 각자 편한 방법으로 라이브러리 초기 설정을 하시면 됩니다.

 

 

CDN 사용 방법

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

위에 debug.addIndicators.min.js 파일은 스크롤매직을 구현한 화면에 인디케이터를 표시하여,

스크롤매직 라이브러리 웹퍼블리싱 마크업을 좀 더 편안하게 할 수 있도록 도와줍니다.

 

 

 

 

 

ScrollMagic 동작 원리 문법

 

ScrollMagic 동작 원리를 이해할 수 있다면, 문법 작성 또한 어렵지 않을 것입니다.

코드를 설명하기 전에, 동작원리를 쉽게 풀어서 설명하자면 다음과 같습니다.

  • 1. ScrollMagic 애니메이션을 실행하기 위한 Controller 를 생성합니다.
  • 2. GSAP(TweenMax) 애니메이션 오브젝트를 생성합니다.
  • 3. ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.
  • 4. GSAP(TweenMax) 애니메이션 오브젝트(2번)를 Scene 오브젝트(3번)에 추가 설정합니다.
  • 5. Controller(1번)을  Scene 오브젝트(3번)에 추가 설정합니다.

 

 

 

 

 

ScrollMagic 동작 원리 맛보기 예제

 

다음 포스팅에 ScrollMagic 본격적인 옵션 설명과 예제를 다루기에 앞서서, 위에서 설명한 동작 원리로 간단하게 만든 ScrollMagic 예제는 아래와 같습니다.

 

 

ScrollMagic Script

$(function(){
	var controller = new ScrollMagic.Controller();	// 1. ScrollMagic 컨트롤러 생성

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

	var scene = new ScrollMagic.Scene({	//3. Scene object 생성
		triggerElement: '#trigger1',	//스크롤 애니메이션 시작 지점 설정
		duration: '100%',	//애니메이션 재생 시간 '100%'지정하면 화면 높이에 따라 유동적으로 end위치가 정해짐
	})
	.setTween(tween)	//4. 2번을 3번에 추가
	.addTo(controller)	//5. 1번(controller)을 3번에 추가
	.addIndicators();
});

 

 

ScrollMagic Result + HTML + CSS + ScrollMagic Script 

  ScrollMagic - '기본 동작 원리' 예제 실습 파일  

scrollmagic-1.zip
0.00MB

 

 

 

 

 

마치며...

 

ScrollMagic 포스팅 계획은 올해 초반부터 계획하고 있었는데, 연말에 시작하게 되었습니다.

요즘 웹사이트 웹퍼블리싱 하다보면 스크롤 애니메이션은 자주 구현해야 하는 트렌드가 되었다고 생각됩니다.

그래서 더욱더 빨리 포스팅하고 싶었지만 늦었지만... 그래도 시작이 반이다??

AOS 라이브러리도 좋지만 위에 만들어서 보여드린 ScrollMagic의 간단한 동작 원리만 보셔도,

AOS 라이브러리에서는 구현할 수 없는 스크롤 애니메이션이라는 것을 확인하실 수 있습니다.

ScrolllMagic과 AOS 라이브러리를 상황에 맞게 사용하신다면, 웹퍼블리셔로서 커다란 본인만의 무기를 가지게 되는 것이라 생각됩니다.

다음 편 포스팅은 ScrollMagic의 옵션에 대하여 상세한 설명과 예제를 통해서 진행하도록 하겠습니다.

감사합니다.

 

 

반응형

+ Recent posts