새로운 차원을 여는 자바스크립트 신기한 효과

Photo of author

By tutor

새로운 차원을 여는 자바스크립트 신기한 효과

새로운 차원을 여는 자바스크립트 신기한 효과

 

새로운 차원을 여는 자바스크립트 신기한 효과

안녕하세요! 오늘은 자바스크립트로 새로운 차원을 여는 신기한 효과에 대해 알아보려고 합니다. 자바스크립트는 다양한 기능과 라이브러리로 브라우저에서 동적으로 웹사이트를 제어할 수 있는 강력한 언어입니다. 이를 통해 화려하고 인상적인 효과를 만들 수 있습니다.

3D 애니메이션


const element = document.querySelector('.box');
element.addEventListener('mouseover', () => {
  element.style.transform = 'rotateX(360deg)';

});

위의 코드는 요소에 마우스를 올렸을 때 3D 회전 효과를 주는 간단한 예시입니다. 요소를 선택하고 마우스오버 이벤트를 추가하여 transform 스타일을 변경합니다. rotateX 함수를 사용하여 X축으로 360도 회전하는 효과를 주었습니다.

파티클 효과


const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const particles = [];

function Particle(x, y, size) {
  this.x = x;
  this.y = y;
  this.size = size;

  this.draw = function() {
    context.fillStyle = 'blue';
    context.fillRect(this.x, this.y, this.size, this.size);
  }
}

function createParticle(event) {
  const x = event.clientX;
  const y = event.clientY;
  const size = Math.random() * 30;

  const particle = new Particle(x, y, size);
  particles.push(particle);
}

canvas.addEventListener('mousemove', createParticle);

function animateParticles() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(particle => {
    particle.draw();
    particle.x += Math.random() * 2 - 1;
    particle.y += Math.random() * 2 - 1;
  });

  requestAnimationFrame(animateParticles);
}

animateParticles();

위의 코드는 마우스를 움직일 때마다 파티클 효과를 주는 예시입니다. 마우스 이벤트를 추가하여 캔버스 위에 파티클을 생성하고 이동시켜줍니다. 매 프레임마다 캔버스를 지우고 파티클들을 다시 그려주는 애니메이션을 만들었습니다.

자바스크립트로 만들어진 다양한 효과들은 웹사이트에 새로운 차원을 더해주고 사용자들에게 더욱 흥미로운 경험을 선사합니다. 신기한 효과를 자바스크립트로 구현하면 웹사이트에서 독특한 분위기를 연출할 수 있습니다.

키워드: 자바스크립트, 신기한 효과, 3D 애니메이션, 파티클 효과, 웹사이트 디자인, 프론트엔드 개발