반응형

 

 

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