Table of Contents

환상적인 효과, 자바스크립트로 구현하기

들어가며

자바스크립트를 이용하여 웹사이트에서 신기하고 멋진 효과를 구현할 수 있습니다. 이번 포스트에서는 자바스크립트로 구현 가능한 몇 가지 환상적인 효과에 대해 알아보겠습니다.

도입 효과


let intro = document.querySelector('h1');
intro.style.opacity = 0;
window.addEventListener('load', function() {
  let opacity = 0;
  setInterval(function() {
    opacity += 0.03;
    intro.style.opacity = opacity;
    if (opacity >= 1) clearInterval(intervalId);
  }, 30);
});

위 코드는 문서가 로드되면 도입 부분의 텍스트를 서서히 나타나게 하는 효과를 구현한 것입니다.

터치 이펙트


let buttons = document.querySelectorAll('.button');
buttons.forEach(function(button) {
  button.addEventListener('mousedown', function() {
    button.style.transform = 'scale(0.9)';
  });
  button.addEventListener('mouseup', function() {
    button.style.transform = 'scale(1)';
  });
});

위 코드는 마우스 클릭으로 버튼을 눌렀을 때 버튼의 크기가 작아지게 하는 터치 이펙트를 구현한 것입니다.

360도 회전


let image = document.querySelector('.image');
let degree = 0;
setInterval(function() {
  degree = (degree + 1) % 360;
  image.style.transform = 'rotate(' + degree + 'deg)';
}, 10);

위 코드는 이미지를 360도 회전시키는 효과를 구현한 것입니다.