티스토리 뷰

[플러그인] 제이쿼리 스크롤 애니메이션 효과 - Scrolla.js



Scrolla.js


지금 소개하고자 하는 플러그인은 스크롤 애니메이션 효과를 주는 플러그인입니다. 간혹 사이트를 돌아다니다 보면, 모든 컨텐츠가 전부 눈에 보이지 않고, 스크롤에 반응하여 어떤 애니메이션으로써 나타나는 것을 보았을 것입니다. 이 플러그인은 그러한 효과를 아주 간단하게 구현할 수 있습니다. 사용법도 간단하기에 천천히 플로그인 사용법을 익혀보겠습니다.


해당 플러그인 이름은 'Scrolla.js' 라는 자바스크립트 플러그인입니다. 소개 중인 플러그인 말고도 비슷한 것이 하나 더 있는데, 'Scrollanim (http://scrollanim.kissui.io/)' 이라는 플러그인도 있습니다.


이번 포스팅에서는 'Scrolla.js' 를 사용 해보도록 하겠습니다. 

간단 사용법 및 데모는 'http://htmlpreview.github.io/https://github.com/maximzhurkin/jquery-scrolla/blob/master/index.html' 에서 확인 하실 수 있습니다.


<script>$('.animate').scrolla();</script>

이렇게 단 한 줄이면 호출이 끝입니다.


해당 플러그인을 사용하려면 animate.css 파일을 헤더에 연결해 주어야 합니다. 

<link rel="stylesheet" href="animate.min.css">


그 다음에는 jQuery 와 scrolla.js 를 헤더에 다음과 같이 포함시켜 주세요.  

항상 어떠한 플러그인을 사용하던, 중요한 것은 플러그인 js 파일 전에 jQuery,파일이 먼저 와야한다는 것을 잊지 마세요~!

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

HTML Elements 에는 자바스크립트에서 호출한 선택자('.animate') 를 class 또는 id 값으로 지정 해주세요. 다음의 코드가 나타내는 속성은 다음의 설명에 따라 설정됩니다.


'data-animate' : 애니메이션의 종류

'data-duration' : 애니메이션이 실행되는 시간

'data-delay' : 애니메이션이 지연되는 시간


여기서 가장 중요한 것은, 애니메이션의 종류입니다. 많은 종류가 존재하며, 데모의 경우 https://daneden.github.io/animate.css/ 를 참고하시면 애니메이션을 보실 수 있습니다. 설정하고 싶은 애니메이션을 'data-animate' 에 지정해주시면 됩니다.

<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.1s" data-offset="100">

이렇게 플러그인을 이용하면 간단하게 원하는 효과를 구현할 수 있습니다. 

'퍼블리싱' 카테고리의 다른 글

[플러그인] 제이쿼리 스크롤 애니메이션 효과 - Scrolla.js  (0) 2017.07.03
[XE] XE의 페이지 모듈값  (0) 2017.06.30
네이버 지도 API 사용하기 2  (0) 2017.06.29
네이버 지도 API 사용하기  (0) 2017.06.28
스크롤 이벤트  (0) 2017.06.26
ajax 개념  (0) 2017.06.13

Recent Comments