재미와 놀람을 주는 자바스크립트 효과

마우스 이벤트 효과

const button = document.querySelector('button');
button.addEventListener('mouseover', () => {
  button.style.background = 'blue';
});
button.addEventListener('mouseout', () => {
  button.style.background = 'red';
});

위 코드는 버튼에 마우스가 올라갔을 때 파란색으로, 벗어났을 때 빨간색으로 바뀌는 효과를 적용합니다.

텍스트 애니메이션 효과

const text = document.querySelector('h1');
let counter = 0;
const interval = setInterval(() => {
  text.style.fontSize = `${++counter}px`;
  if (counter === 50) clearInterval(interval);
}, 50);

위 코드는 페이지 로드 후 50ms마다 텍스트 크기를 1px씩 늘려가며 애니메이션 효과를 줍니다.

이미지 슬라이드 효과

const images = ['img1.png', 'img2.png', 'img3.png'];
let currentIndex = 0;
const image = document.querySelector('img');
setInterval(() => {
  image.src = images[++currentIndex % images.length];
}, 3000);

위 코드는 3개의 이미지를 순차적으로 보여주며, 3초마다 이미지가 자동으로 변경되는 슬라이드 효과를 적용합니다.

이렇게 자바스크립트를 활용해 놀라운 효과를 만들어 보세요. 자바스크립트는 끝없는 재미와 가능성을 가지고 있습니다.

키워드: 자바스크립트 재미있는 효과