- Scrolla.js 소개
- 사용 방법 1 - 기본 (width Animate.css)
- Scrolla 옵션 설정
- 데모 화면
# 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와 함께 사용할수도 있고 개별로 사용할 수 있다
# 사용 방법 1 - 기본 (with Animate.css)
1. Animate.css, jQuery, scrolla.js 연결 (CDN)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<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>- Scrolla CDN : jsDelivr CDN 이용 (https://www.jsdelivr.com/package/npm/jquery-scrolla)
- jsDelivr : 오픈 소스 CDN 서비스 사이트
2. [HTML] Scrolla 적용할 요소에 클래스명, 옵션 속성 추가
- Scrolla 적용할 요소 : 애니메이션이 실행될 위치
- 요소에 스크롤 위치시 data-animate의 속성값이 클래스명에 추가가 되어 animate.css가 실행되는 원리
- 다른 속성 (data-duration, data-delay, data-offset, data-iteration) 은 인라인 스타일로 동작
<div class="animate" data-animate="animate__bounceIn" data-duration="1s" data-delay="0.5s" data-offset="100" data-iteration="1">
THIS
</div>| 요소 속성 옵션 정리 | |
| data-animate | (필수) 애니메이션 종류 지정, 클래스명에 추가 된다 ( Animate.css 애니메이션 이름 입력) |
| data-duration | 애니메이션 동작 시간 |
| data-delay | 애니메이션 지연 시간 |
| data-offset |
애니메이션 동작 영역 범위 (px) |
| data-iteration | 애니메이션 반복 횟수 |
3. [JS] Scrolla 초기화
- scorlla를 사용할 요소(.animate)에 scrolla를 선언하여 활성화 한다
- 초기화 선언은 한 번만 가능
$(function(){
$('.animate').scrolla();
});# Scrolla 옵션 설정
- 모바일에도 동작할지, 한번만 실행할지, animate.css 버전을 어떤 것을 사용할지 설정할 수 있다.
$(function(){
$('.animate').scrolla({
mobile: true,
once: false,
animateCssVersion: 3,
});
});| mobile : 모바일시 활성화 여부 | |
| true | 모바일에도 활성화 |
| false | (기본) 모바일에서는 비활성화 |
| once : 스크롤시 실행 횟수 | |
| true | 한번만 실행 |
| false | (기본) 반복 실행 |
| animateCssVersion : 사용되는 animate.css 버전 | |
| 3 | - animate 버전 3 - 스크롤 위치시 [data-animate] 속성 값이 클래스명에 붙는다 - 때문에 animate.css를 사용하기 위해서는 풀네임인 "animate__bounceIn" 를 붙여야 한다 |
| 4 | - (기본) animate 버전 4 - 스크롤 위치시 " animate__ + [data-animate] " 속성 값이 클래스명에 붙는다 - 때문에 animate.css를 사용하기 위해서는 접두어 animate__를 제외한 "bounceIn" 종류 이름만 붙여야 한다 ( 3처럼 [data-animate] 속성 값으로 "animate__bounceIn"을 붙인다면 "animate__animate__bounceIn"가 되기 때문) - 버전에 따라 조금씩 동작 방식이 다르기 때문에 브라우저 개발모드로 클래스명이 어떻게 붙는지 확인하면서 진행한다 |
# 데모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrolla-demo1 (기본)</title>
<!-- CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<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;}
ul li{list-style-type: none;}
/* Layout.css */
ul{max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, 50px); gap: 6px; justify-content: center; padding: 20px;}
ul li{aspect-ratio: 1/1; background-color:lightblue; border-radius: 4px; font-size: 10px; display: flex; align-items: center; justify-content: center;}
</style>
</head>
<body>
<ul>
<li class="animate" data-animate="animate__flipInY" data-duration="1s" data-iteration="1">START</li>
</ul>
<script>
$(function(){
$('.animate').scrolla({
mobile: true,
once: false,
animateCssVersion: 3,
});
});
// 요소 추가
const ulEl = document.querySelector("ul");
for (let i = 0; i < 499; i++) {
const randomDuration = (Math.random() * 0.6 + 0.3).toFixed(1) + "s"; // 0.3~0.9s 랜덤 값
// 옅은 하늘색 계열: R(0~100), G(150~255), B(200~255)
const r = Math.floor(Math.random() * 51) + 150; // 빨강 값 (150~200)
const g = Math.floor(Math.random() * 51) + 180; // 초록 값 (180~230)
const b = Math.floor(Math.random() * 46) + 210; // 파랑 값 (210~255)
const randomColor = `rgb(${r}, ${g}, ${b})`; // 최종 랜덤 색
ulEl.innerHTML += `<li class="animate" data-animate="animate__flipInY" data-duration="${randomDuration}" data-iteration="1" style="background-color:${randomColor}; "></li>`;
}
</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 [2] : CSS Custom (0) | 2025.02.17 |
| Animate.css - 애니메이션 CSS 라이브러리 (0) | 2025.02.14 |
| Splitting.js - 텍스트 분리 JS 라이브러리 (0) | 2025.02.13 |
