재미있는 자바스크립트 효과들: 놀이공원에서 놀아보는 것 같은 웹사이트

자바스크립트로 웹사이트를 더욱 재미있게 만들어보세요. 이번 포스트에서는 놀이공원에서 놀아보는 것 같은 다양한 자바스크립트 효과들을 소개합니다.

텍스트 애니메이션

const text = document.querySelector('.text');

text.innerHTML = text.textContent.replace(/\S/g, "$&");

const letters = document.querySelectorAll('span');
let delay = 0;

letters.forEach(letter => {
  letter.style.animationDelay = `${delay}ms`;
  delay += 50;
});

위 코드는 텍스트를 각 문자마다 span 태그로 감싸고, 각 애니메이션의 지연 시간을 조정하여 텍스트가 한 글자씩 쓰여지는 효과를 만듭니다.

이미지 슬라이더

const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
let index = 0;

const displaySlide = (i) => {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[i].classList.add('active');
};

next.addEventListener('click', () => {
  index++;
  if(index > slides.length - 1) {
    index = 0;
  }
  displaySlide(index);
});

prev.addEventListener('click', () => {
  index--;
  if(index < 0) {
    index = slides.length - 1;
  }
  displaySlide(index);
});

위 코드는 이미지 슬라이더를 만드는 방법입니다. 각 이미지를 순서대로 보여주고, 다음 버튼과 이전 버튼을 누를 때마다 다음 이미지 혹은 이전 이미지로 전환됩니다.

마우스 효과

const container = document.querySelector('.container');
const circles = 300;
const size = 30;

const createCircle = (e) => {
  const circle = document.createElement('div');
  circle.classList.add('circle');
  circle.style.left = e.clientX + 'px';
  circle.style.top = e.clientY + 'px';
  circle.style.width = size + 'px';
  circle.style.height = size + 'px';

  container.appendChild(circle);

  setTimeout(() => circle.remove(), 500);
};

container.addEventListener('mousemove', (e) => {
  for(let i=0; i<circles; i++) {
    createCircle(e);
  }
});

위 코드는 마우스를 움직일 때마다 일정한 크기의 원이 생성되는 효과를 만듭니다. 원의 색상이나 크기를 바꾸어 더 다양한 효과를 만들 수 있습니다.

위와 같은 자바스크립트 재미있는 효과를 이용하면 웹사이트를 눈에 띄게 만들 수 있습니다. 이를 이용해 사용자가 더욱 즐거운 경험을 할 수 있습니다.

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