Scrolla.js 사용법

Scrolla.js 사용법을 알아보자.

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/scrolla.jquery.min.js"></script>
<script src="js/script.js"></script>

1. 상단에 제이쿼리cdn, scrolla.js, script 순으로 script를 걸어둔다.

<div class="aniamte" data-animate="motion"></div>

2. 애니메이션을 주고싶은곳에 class animation을 주고 data-animate="motion" 을 입력해준다.

$(function() {
	$('.animate').scrolla({
		mobile: true, //모바일버전시 활성화
		once: false //스크롤시 딱 한번만 하고싶을땐 true
	});
});

3. script파일에 이와같이 작성을 해준다.

scrolla.js를 쓰는 목적은 스크롤이 뷰포트에 왔을때 motion이라는 클래스가 붙으므로 응용하여 해당위치에 왔을때 animation을 주기 용이하다.

ex)

.visual.motion .mainText {transform: translate3d(0,0,0) skew(0deg); overflow: hidden;}
.visual.motion .mainText p span {display: block; animation-name:textAni; animation-duration: 1.8s; }
.visual.motion .mainText p:nth-child(2) span {animation-duration: 1.7s;}
.visual.motion .mainText p:nth-child(3) span {animation-duration: 1.5s;}

@keyframes textAni {
  0% {opacity: 0;}
  30% {opacity: 0; transform: translate3d(0,-90px,0) skew(-20deg); transform-origin:top left;}
}
@keyframes textAni2 {
  0% {opacity: 0;}
  30% {opacity: 0;}
}

.visual.motion .subText {animation-name: textAni2; animation-duration: 2.3s;}