반응형
자바스크립트를 사용하요 텍스트 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 텍스트 요소에 클래스 이름 이름 지정만으로 연동이 가능하도록 구현되어 있으며 작동은 지정된 클래스를 단어로 분리하고 효과를 적용하는 방식입니다.
// wave-module.js
const waveTextEl = document.querySelector('.wave-text')
setInterval(() => {
const child = waveTextEl.firstElementChild
const spanEls = document.querySelectorAll('.wave-text span')
if (window.getComputedStyle(child).transform.includes('-40')) {
spanEls.forEach(span => {
span.classList.remove('up')
});
} else {
spanEls.forEach(span => {
span.classList.add('up')
});
}
}, 2000)
export function createSpans() {
waveTextEl.innerHTML = waveTextEl.innerText.split('').map((p, idx) => `<span style="transition-delay: ${idx * 50}ms">${(p === ' ' ? ' ' : p)}</span>`).join('')
}적용하기
모듈의 사용은 HTML 파일에 메인 자바스크립트 링크에 타입요소를 추가하고
type="module"<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- custom style -->
<link rel="stylesheet" href="main.css" />
<script defer type="module" src="index.js"></script>
</head>
<body>
<h2 class="wave-text">wave effect</h2>
</body>
</html>CSS파일에 아래 스타일을 추가합니다
/* module.css */
.wave-text span {
display: inline-block;
transition: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
transform: translateY(-0px);
}
.wave-text span.up {
transform: translateY(-40px);
}마지막으로 메인 자바스크립트 파일에서 아래 함수를 호출하면 완성됩니다.
// index.js
import { createSpans } from "./wave-module.js";
createSpans()이상으로 텍스트 물결효과를 만드는 방법과 모듈을 사용하여 간단히 적용하는 방법을 살펴보았습니다.
728x90
반응형
'프론트엔드 > 자바스크립트' 카테고리의 다른 글
| 리덕스 (1) | 2023.06.25 |
|---|---|
| 엔피엠 - 제이슨 서버 (0) | 2023.05.22 |
| 반응형 웹 디바이스 구분하기 (3) | 2023.03.23 |
| 라이브러리 - RxJS (0) | 2023.02.15 |
| 자바스크립트 컴포넌트 - 확장 검색 창 (6) | 2023.02.14 |
