신기한 자바스크립트 효과

마우스 호버 시 이미지 확대/축소

const images = document.querySelectorAll('.image');

images.forEach((image) => {
  image.addEventListener('mouseenter', (event) => {
    event.target.style.transform = 'scale(1.2)';
  });
  
  image.addEventListener('mouseleave', (event) => {
    event.target.style.transform = 'scale(1)';
  });
});

이 코드는 마우스를 호버 시 이미지를 확대/축소하는 효과를 구현하는 코드입니다. 이미지 DOM 요소를 선택한 뒤, forEach 메소드를 사용하여 이미지 요소 각각에 이벤트를 추가합니다. 마우스를 호버 시에는 transform 스타일 속성을 scale(1.2) 값으로 변경합니다. 마우스가 벗어나면 스타일 값이 다시 scale(1)로 원래 크기로 복원됩니다.

텍스트 타이핑 효과

const texts = ['첫 번째 문장입니다.', '두 번째 문장입니다.', '세 번째 문장입니다.'];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';

(function type() {
  if(count === texts.length){
    count = 0;
  }
  currentText = texts[count];
  letter = currentText.slice(0, ++index);

  document.querySelector('.typing').textContent = letter;
  if(letter.length === currentText.length){
    count++;
    index = 0;
  }
  setTimeout(type, 200);
})();

이 코드는 타이핑 효과를 만드는 코드입니다. 배열에 있는 각각의 문자열을 하나씩 타이핑하는 효과를 가지고 있습니다. 재귀 함수 type을 사용하여 순차적으로 배열 내의 문자열을 하나씩 타이핑합니다. setTimeout 함수를 통해 일정한 시간 간격으로 타이핑 효과가 진행됩니다.

이미지 슬라이더

const slides = document.querySelectorAll('.slide');
const auto = true;
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {

  const current = document.querySelector('.current');
  current.classList.remove('current');

  if(current.nextElementSibling){
      current.nextElementSibling.classList.add('current');
  }
  else{
      slides[0].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'), 200);
}

if(auto){
  slideInterval = setInterval(nextSlide, intervalTime);
}

이 코드는 이미지 슬라이더를 만드는 코드입니다. DOM 요소에 접근하여 이미지 슬라이드 기능을 구현합니다. nextSlide 함수는 현재 이미지 요소에서 .current 클래스를 제거한 뒤, 다음 요소에 .current 클래스를 추가합니다. 배열의 마지막 요소일 경우, 다시 배열의 첫 번째 요소에 .current 클래스를 추가합니다. 그리고 setTimeout 함수를 사용하여 0.2초 간격으로 클래스를 제거합니다.

결론

이상으로 자바스크립트의 신기한 효과를 구현하는 코드를 알아 보았습니다. 이런 효과들을 활용하면 웹 사이트에 독창적인 분위기를 추가할 수 있습니다.

자바스크립트 신기한 효과