물결 (2) 썸네일형 리스트형 자바스크립트 모듈 - 버튼물결 자바스크립트로 버튼 클릭 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 요소의 위치와 클릭이벤트를 사용하여 효과를 적용하는 방식입니다. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.left = `${e.clientX - e.target.getBoundingClientRect().x}px` rippleEl... 자바스크립트 모듈 - 물결효과 자바스크립트를 사용하요 텍스트 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 텍스트 요소에 클래스 이름 이름 지정만으로 연동이 가능하도록 구현되어 있으며 작동은 지정된 클래스를 단어로 분리하고 효과를 적용하는 방식입니다. // 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'.. 이전 1 다음
