- Scrolla.js 소개
- 사용 방법 3 - 다른 라이브러리 활용 (with Splitting.js)
- 데모 화면
목표
스크롤 애내메이션 Scrolla.js 라이브러리와 글자를 분리하는 Splitting.js 라이브러리를 활용하여 스크롤시 한글자 애니메이션이 되는 효과를 만들어보자
스크롤 애내메이션 Scrolla.js 라이브러리와 글자를 분리하는 Splitting.js 라이브러리를 활용하여 스크롤시 한글자 애니메이션이 되는 효과를 만들어보자
# 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와 함께 사용할수도 있고 개별로 사용할 수 있다
# 사용 방법 3 - 다른 라이브러리 활용 (with Splitting.js)
1. jQuery, scrolla.js, splitting.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>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
2. [HTML] Scrolla 적용할 요소에 클래스명, "data-animate" 속성 추가
- 애니메이션이 실행될 위치 : Scrolla 적용 요소 ('.animate')
- Splitting 적용할 요소('.item') : ('.animate > .word > .char') 로 요소가 분리된다
<div class="animate" data-animate="action">
<div data-splitting class="item">This is Splitting + Scrolla </div>
</div>
3. [JS] Splitting 초기화, Scrolla 초기화 (한 번만 가능)
$(function(){
Splitting();
$('.animate').scrolla({
mobile: true,
once: false,
animateCssVersion: 3,
});
});
4. [CSS] CSS 애니메이션 설정
- 애니메이션을 실행될 요소('.char')에 애니메이션 설정
- ('.animate') 요소에 스크롤 위치하여 "action"이라는 클래스명이 추가 되면 ('.char')요소가 splitting-slide-down 애니메이션 실행
.animate.action .item .char {
display: inline-block; /* 추가 작성 */
animation: splitting-slide-down .2s cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(60ms * var(--char-index));
}
@keyframes splitting-slide-down {
from {
transform: translateY(-.3em) scale(.8);
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-demo3 (with Splitting.js)</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>
<script src="https://unpkg.com/splitting/dist/splitting.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{margin-bottom: 9em; font-size: 64px; font-weight: 800;padding: .5em; box-sizing: border-box;}
.area div{white-space: nowrap; line-height: 2em;}
.area div:nth-child(1){text-align: end;}
.area div:nth-child(2){text-align: start;}
.area div:nth-child(3){text-align: end;}
/* animate */
.area div.action .char{
display: inline-block;
animation: splitting-animate .5s cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(60ms * var(--char-index));
}
.area div:nth-child(2).action{
animation: splitting-animate; animation-duration: 1s;
}
@keyframes splitting-animate {
from { transform: translateY(.5em); opacity: 0; }
}
</style>
</head>
<body>
<div class="loading">
스크롤하세요
</div>
<div class="area">
<div data-splitting class="animate" data-animate="action">SCROLL ANIMATION</div>
<div class="animate" data-animate="action">THIS IS SCROLLA</div>
<div data-splitting class="animate" data-animate="action">with CUSTOM CSS</div>
</div>
<script>
$(function(){
Splitting(); // Splitting 초기화
$('.animate').scrolla({ // scrolla 초기화
mobile: true,
once: false,
animateCssVersion: 3,
});
});
</script>
</body>
</html>'Web 개발 > Plugin&Library' 카테고리의 다른 글
| Slick.js [2] : 옵션 정리- 슬라이드 jQuery 라이브러리 (0) | 2025.02.20 |
|---|---|
| Slick.js [1] - 슬라이드 jQuery 라이브러리 (0) | 2025.02.19 |
| Scrolla.js [2] : CSS Custom (0) | 2025.02.17 |
| Scrolla.js [1] : with Animate.css - 스크롤 애니메이션 jQuery 라이브러리 (0) | 2025.02.16 |
| Animate.css - 애니메이션 CSS 라이브러리 (0) | 2025.02.14 |
