새로운 차원을 여는 자바스크립트 신기한 효과
안녕하세요! 오늘은 자바스크립트로 새로운 차원을 여는 신기한 효과에 대해 알아보려고 합니다. 자바스크립트는 다양한 기능과 라이브러리로 브라우저에서 동적으로 웹사이트를 제어할 수 있는 강력한 언어입니다. 이를 통해 화려하고 인상적인 효과를 만들 수 있습니다.
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 애니메이션, 파티클 효과, 웹사이트 디자인, 프론트엔드 개발