- Scrolla.js 소개
- 사용 방법 2 - CSS Custom
- 데모 화면
목표
문장, 단어 등 글자별로 나눌이전 포스팅에서 Scolla.js 라이브러리는 Animate.css 애니메이션 라이브러리와 함께 스크롤 애니메이션을 적용했었다. Animate.css가 아닌 직접 CSS를 만들어 스크롤 애니메이션을 적용해보자
문장, 단어 등 글자별로 나눌이전 포스팅에서 Scolla.js 라이브러리는 Animate.css 애니메이션 라이브러리와 함께 스크롤 애니메이션을 적용했었다. Animate.css가 아닌 직접 CSS를 만들어 스크롤 애니메이션을 적용해보자
# Scrolla.js 소개
Scrolla - jQuery plugin for reveal animations when scrolling
Include animate.css Include jQuery and jquery-scrolla Add html Initialize plugin $(document).ready(function(){ $('.animate').scrolla(); }); Custom settings $('.animate').scrolla({ // default mobile: false, // disable animation on mobiles once: false, // on
maximzhurkin.github.io
- 스크롤 애니메이션 제이쿼리(jQuery) 플러그인
- jQuery 플러그인으로 Scrolla.js 선언 전에 jQuery가 연결되어 있어야 한다
- Animate.css와 함께 사용할수도 있고 개별로 사용할 수 있다
# 사용 방법 2 - CSS Custom
1. jQuery, scrolla.js 연결 (CDN)
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrolla@0.0.3/dist/js/jquery.scrolla.min.js"></script>
2. [HTML] Scrolla 적용할 요소에 클래스명, "data-animate" 속성 추가
- 애니메이션이 실행될 위치 : Scrolla 적용 요소 ('.animate')
- ('. animate ') 요소에 스크롤 위치시 "action"이라는 클래스명이 추가
<div class="animate custom-css" data-animate="action">
<div class="item">요소</div>
</div>
3. [JS] Scrolla 초기화 (한 번만 가능)
$(function(){
$('.animate').scrolla({
mobile: true,
once: false,
animateCssVersion: 3,
});
});
4. [CSS] CSS 애니메이션 설정
- 애니메이션을 실행될 요소('.item')에 애니메이션 설정
- ('.animate') 요소에 스크롤 위치하여 "action"이라는 클래스명이 추가 되면 ('.item')요소가 custom-animate 애니메이션 실행
.custom-css.action .item{
animation: custom-animate;
animation-duration: 1s;
}
@keyframes custom-animate {
0%{transform: translateX(-50px); opacity: 0;}
30%{transform: translateX(-50px); opacity: 0;}
}# 데모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrolla-demo2 (Custom CSS)</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrolla@0.0.3/dist/js/jquery.scrolla.min.js"></script>
<style>
/* reset.css */
*{margin: 0; padding: 0;}
body{width: 800px; margin: 0 auto ;}
/* layout.css */
.loading{height: 100vh; display: flex; font-size: 32px; align-items: center; justify-content: center;}
.area{height: 8em; margin-bottom: 8em; font-size: 64px; font-weight: 800; position: relative;}
.area div{position: absolute; overflow: hidden; white-space: nowrap;}
.area div:nth-child(1){top:1em; left:1em; } /* 왼쪽에서 슬라이드 효과 */
.area div:nth-child(2){top:3em; right:1em;}
.area div:nth-child(3){top:5em; right:2.4em;} /* 오른쪽에서 슬라이드 효과 */
.area div p{position: absolute; top:0;}
.area div:nth-child(1) p{left:0;} /* 왼쪽에서 슬라이드 효과 */
.area div:nth-child(3) p{right:0;} /* 오른쪽에서 슬라이드 효과 */
/* animate */
.area div:nth-child(1).action{animation: action-side; animation-duration: 2s;}
.area div:nth-child(2).action{animation: fade-in; animation-duration: 1.5s;}
.area div:nth-child(3).action{animation: action-side; animation-duration: 2s;}
@keyframes action-side {
0%{width: 0px;}
30%{width: 0px;}
}
@keyframes fade-in {
0%{opacity: 0;}
30%{opacity: 0;}
}
</style>
</head>
<body>
<div class="loading">
스크롤하세요
</div>
<div class="area">
<div class="animate" data-animate="action"><p>SCROLL ANIMATION</p></div>
<div class="animate" data-animate="action"><p>THIS IS SCROLLA</p></div>
<div class="animate" data-animate="action"><p>with CUSTOM CSS</p></div>
</div>
<script>
$(function(){
// 크기 설정
$('.animate p').each(function() {
$(this).parent().css({
width: this.offsetWidth,
height: this.offsetHeight
});
});
// scrolla 초기화
$('.animate').scrolla({
mobile: true,
once: false,
animateCssVersion: 3,
});
});
</script>
</body>
</html>'Web 개발 > Plugin&Library' 카테고리의 다른 글
| Slick.js [1] - 슬라이드 jQuery 라이브러리 (0) | 2025.02.19 |
|---|---|
| Scrolla.js [3] : Splitting.js 을 활용하여 개별 텍스트에 애니메이션 주기 (0) | 2025.02.18 |
| Scrolla.js [1] : with Animate.css - 스크롤 애니메이션 jQuery 라이브러리 (0) | 2025.02.16 |
| Animate.css - 애니메이션 CSS 라이브러리 (0) | 2025.02.14 |
| Splitting.js - 텍스트 분리 JS 라이브러리 (0) | 2025.02.13 |
