본문 바로가기
Js

createElement, mousemove

by 영감은어디에 2025. 2. 23.

const rounds = [];
const numrd = 20;
for(let i= 0; i<numrd; i++){
    const round = document.createElement('span');
    document.body.appendChild(round);
    round.classList.add('round');
    rounds.push(round);
}
document.addEventListener('mousemove', (event)=> {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    rounds.forEach((span, index) => {
        const delay = Math.random() * 200;
        setTimeout(() => {
            span.style.left = `${mouseX + 20 + index}px`;
            span.style.top = `${mouseY + index }px`;
        }, delay)
    })
})
span.round{position: absolute; width: 20px; height: 20px; border-radius: 50%; 
 background-color: rgb(187, 255, 232);box-shadow: 0px 0px 20px rgba(125, 229, 255, 0.5); 
 pointer-events: none; transition: all 0.1s;}

'Js' 카테고리의 다른 글

menu bar mouse move  (0) 2025.02.25
폴리곤. 컬러 로테이션 hue-rotate  (0) 2025.02.24
Lottie json 파일 단순 마우스 오버 효과  (0) 2024.10.17
replace(), 유튜브 클릭시 오토플레이  (0) 2024.07.17
숫자 카운터  (0) 2024.07.17
hasClass를 이용한 이미지 체인지  (0) 2024.07.17
throttle(), clone()  (0) 2024.07.17
lottieFiles  (0) 2024.07.15