- splitting.js 소개
- 사용 방법
- 데모 화면
# Splitting.js 소개
Splitting.js
CSS Vars for split words, chars, images and more!
splitting.js.org
- 요소(텍스트, 그리드)를 분할하여 요소를 생성하여 텍스트 애니메이션를 적용할 수 있는 JS 라이브러리
- 문장, 단어 등 글자별로 나눌 수 있는 텍스트 분리 라이브러리
# 사용 방법
1. Splitting.js 연결 (CDN)
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
2. Splitting 초기화 코드 실행 작성
<script>
Splitting();
</script>
3. [HTML] Splitting 적용할 요소에 data-splitting 속성 추가
<div data-splitting>This is SPLITTING!</div>
4. [CSS] 요소에 애니메이션 추가
- Splitting 홈페이지의 CodePen 예제 활용 (경로 : Guide → CodePen Template)
- {display:inline-block;} 추가 작성 필요
- 단어는 .word 로 분리, 한 글자는 .char 로 분리 됨
div .char {
display: inline-block; /* inline-block 추가해야함! */
animation: slide-in .3s cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(60ms * var(--char-index));
}
@keyframes slide-in {
from {
transform: translateY(-1em) rotate(-.5turn) scale(0.1);
opacity: 0;
}
}
# 데모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<title>Splitting 데모</title>
<style>
/* reset.css */
*{margin: 0; padding: 0;}
li{list-style: none;}
/* common.css */
.wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh;}
.wrap ul li button{ border: 0; color: #fff; font-size: 16px; font-weight: 600; padding: 24px; width: 160px; cursor: pointer; border-radius: 10px;}
.wrap ul li button:hover {filter: brightness(110%);}
.wrap ul li button#startBTN{background-color: crimson;}
.wrap ul li button#resetBTN{background-color: darkcyan; display: none;}
.wrap #view{ font-size: 48px; font-weight: 600;}
/* animation : 기본 화면 */
.wrap #view .char {
display: inline-block;
animation: point 2s cubic-bezier(.5, 0, .5, 1) both;
animation-iteration-count: infinite;
animation-delay: calc(60ms * var(--char-index));
}
@keyframes point {
0% { transform: translateY(0); }
50% { transform: translateY(-.3em); }
100% { transform: translateY(0); }
}
/* animation : 기본 코드 */
.wrap #view.on .char {
display: inline-block;
animation: slide-in .3s cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(60ms * var(--char-index));
}
@keyframes slide-in {
from { transform: translateY(-1em) rotate(-.5turn) scale(0.1); opacity: 0; }
}
</style>
</head>
<body>
<div class="wrap">
<p data-splitting id="view">THIS IS SPLITTING!</p>
<ul>
<li><button id="startBTN">START</button></li>
<li><button id="resetBTN">RESET</button></li>
</ul>
</div>
<script>
Splitting();
const startBTN = document.querySelector("#startBTN");
const resetBTN = document.querySelector("#resetBTN");
const view = document.querySelector("#view");
startBTN.addEventListener("click", function(){
resetBTN.style.display="block";
this.style.display="none";
view.classList.add("on");
})
resetBTN.addEventListener("click", function(){
startBTN.style.display="block";
this.style.display="none";
view.classList.remove("on");
})
</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 |
| Scrolla.js [1] : with Animate.css - 스크롤 애니메이션 jQuery 라이브러리 (0) | 2025.02.16 |
| Animate.css - 애니메이션 CSS 라이브러리 (0) | 2025.02.14 |
