신기한 자바스크립트 효과: 웹 페이지에 화려한 기능을 더해보자

자바스크립트를 사용하여 웹 페이지에 흥미로운 효과를 만들 수 있습니다. 이번 글에서는 자바스크립트로 가능한 간단하면서도 멋진 꾸미기 기술을 소개해드리겠습니다.

스크롤 애니메이션

const boxes = document.querySelectorAll('.box');

window.addEventListener('scroll', checkBoxes);

checkBoxes();

function checkBoxes() {
  const triggerBottom = window.innerHeight / 5 * 4;

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top;

    if(boxTop < triggerBottom) {
      box.classList.add('show');
    } else {
      box.classList.remove('show');
    }
  });
}

위 코드는 스크롤 애니메이션을 구현하는 방법입니다. 웹 페이지에서 박스가 특정 지점에 도달하면, 해당 박스에 .show 클래스를 추가하여 효과를 적용합니다.

확대 효과

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

images.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('zoom');
  });
});

이 코드는 이미지를 클릭하면 확대 효과를 적용하는 기술입니다. 이미지에 .zoom 클래스를 추가하여 확대 애니메이션을 실행합니다.

색상 전환

const button = document.querySelector('button');
const body = document.querySelector('body');
const colors = ['red', 'yellow', 'green', 'blue', 'purple'];

button.addEventListener('click', changeColor);

function changeColor() {
  const colorIndex = parseInt(Math.random() * colors.length);

  body.style.backgroundColor = colors[colorIndex];
}

위 코드는 버튼 클릭 시 배경색을 무작위로 변경하는 방법입니다. colors 배열에 색상을 저장하고, click 이벤트를 사용하여 배경색이 임의로 변경됩니다.

이상, 자바스크립트로 가능한 신기한 효과에 대해 알아보았습니다. 이 기술들을 사용하여 새로운 웹페이지를 만들어보세요!

키워드: 자바스크립트 신기한 효과