신기한 자바스크립트 효과

자바스크립트는 웹 개발에서 널리 사용되는 프로그래밍 언어로, 다양한 동적인 효과를 만들 수 있습니다. 이번 포스트에서는 몇 가지 신기한 자바스크립트 효과를 살펴보겠습니다.

1. 스크롤 애니메이션

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

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    element.classList.add('animate');
  } else {
    element.classList.remove('animate');
  }
});

이 코드는 웹 페이지를 스크롤 할 때 특정 요소에 애니메이션 효과를 부여합니다. 스크롤이 200px 이상 내려갈 때 요소에 ‘animate’ 클래스가 추가되며, 다시 위로 스크롤 할 때에는 클래스가 제거됩니다. 이렇게 구현하면 사용자가 스크롤하는 동안 요소가 부드럽게 움직이는 효과를 볼 수 있습니다.

2. 모달 창

const openModalButton = document.querySelector('.open-modal');
const closeModalButton = document.querySelector('.close-modal');
const modal = document.querySelector('.modal');

openModalButton.addEventListener('click', () => {
  modal.classList.add('active');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.remove('active');
});

이 코드는 모달 창을 구현하는 방법입니다. 사용자가 ‘open-modal’ 클래스를 가진 버튼을 클릭하면 모달 창에 ‘active’ 클래스가 추가되어 나타나고, ‘close-modal’ 클래스를 가진 버튼을 클릭하면 ‘active’ 클래스가 제거되어 모달 창이 사라집니다.

3. 텍스트 타이핑 애니메이션

const textElement = document.querySelector('.typing-text');
const texts = ['신기한', '재미있는', '창의적인'];

let index = 0;
let letterIndex = 0;

function type() {
  if (letterIndex < texts[index].length) {
    textElement.textContent += texts[index].charAt(letterIndex);
    letterIndex ++;
    setTimeout(type, 200);
  } else {
    setTimeout(erase, 1500);
  }
}

function erase() {
  if (letterIndex > 0) {
    textElement.textContent = texts[index].substring(0, letterIndex - 1);
    letterIndex --;
    setTimeout(erase, 100);
  } else {
    index = (index + 1) % texts.length;
    setTimeout(type, 500);
  }
}

type();

이 코드는 텍스트를 타이핑하는 애니메이션을 구현합니다. ‘typing-text’ 클래스를 가진 요소에 신기한 자바스크립트 효과라는 글자들을 타이핑하고, 지우고, 다음 문구를 타이핑하는 것을 반복합니다. 각 애니메이션 간의 딜레이는 setTimeout 함수를 사용하여 제어합니다.

자바스크립트 신기한 효과 설명: 자바스크립트로 스크롤 애니메이션, 모달 창, 텍스트 타이핑 애니메이션 등 다양한 동적인 효과를 만들 수 있습니다.