웹 서핑을 하다 보면 다양한 웹사이트와 블로그에서 창의적이고 매력적인 마우스 이펙트를 종종 보게 됩니다. 이러한 이펙트는 웹사이트에 생동감을 더하고, 사용자 경험을 향상시키는 데 큰 역할을 합니다.
오늘은 바로 그런 마우스 이펙트를 자바스크립트로 만들어 볼 것입니다.
마우스 이펙트는 웹사이트의 인터페이스에 독특한 터치를 추가하며, 사용자의 상호작용을 더 재미있고 몰입감 있게 만듭니다.
예를 들어, 마우스 커서를 따라 움직이는 애니메이션 요소, 클릭 시 흩어지는 효과, 마우스의 움직임에 반응하는 배경 등 다양한 형태가 있습니다.
자바스크립트는 이러한 동적인 이펙트를 생성하는 데 아주 적합한 언어입니다. HTML과 CSS와 함께 사용하여, 웹 페이지에 독특하고 상호작용적인 요소를 쉽게 추가할 수 있습니다.
오늘 만들어볼 이펙트는 사용자의 마우스 움직임을 감지하여 화면에 시각적 요소를 생성하고, 이 요소들이 마우스 커서를 따라 움직이며, 점차 사라지는 효과를 구현할 것입니다.
코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 디자인을 위해 뷰포트를 설정합니다 -->
<style>
body {
margin: 0; /* body의 모든 마진을 제거합니다 */
overflow: hidden; /* 스크롤바를 숨깁니다 */
}
canvas {
position: absolute; /* 캔버스를 절대 위치로 설정합니다 */
top: 0; /* 상단에서의 위치를 0으로 설정합니다 */
left: 0; /* 왼쪽에서의 위치를 0으로 설정합니다 */
}
</style>
</head>
<body>
<canvas></canvas> <!-- 그래픽을 그리기 위한 캔버스 요소를 추가합니다 -->
<script>
const canvas = document.querySelector('canvas'); // 캔버스 요소를 선택합니다
const ctx = canvas.getContext('2d'); // 2D 그리기 컨텍스트를 가져옵니다
canvas.width = window.innerWidth; // 캔버스의 너비를 창의 너비로 설정합니다
canvas.height = window.innerHeight; // 캔버스의 높이를 창의 높이로 설정합니다
let particles = []; // 파티클을 저장할 배열을 초기화합니다
class Particle {
constructor(x, y, radius, color) { // 파티클 클래스를 정의합니다
this.x = x; // x 좌표
this.y = y; // y 좌표
this.radius = radius; // 원의 반지름
this.color = color; // 원의 색상
this.alpha = 1; // 원의 투명도 (1은 완전 불투명)
}
draw() { // 원을 그리는 메소드
ctx.save(); // 현재 상태를 저장합니다
ctx.globalAlpha = this.alpha; // 전역 투명도를 파티클의 투명도로 설정합니다
ctx.beginPath(); // 경로를 시작합니다
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); // 원을 그립니다
ctx.fillStyle = this.color; // 채우기 색상을 설정합니다
ctx.fill(); // 원을 채웁니다
ctx.restore(); // 저장된 상태를 복원합니다
}
update() { // 원의 상태를 업데이트하는 메소드
this.draw(); // 원을 그립니다
this.radius -= 0.5; // 반지름을 줄입니다
this.alpha -= 0.01; // 투명도를 줄입니다
}
}
function addParticle(event) { // 마우스 이벤트에 의해 파티클을 추가하는 함수
const radius = Math.random() * 20 + 5; // 반지름을 랜덤으로 설정합니다
particles.push(new Particle(event.clientX, event.clientY, radius, 'blue')); // 새 파티클을 배열에 추가합니다
}
function animate() { // 애니메이션을 처리하는 함수
requestAnimationFrame(animate); // 다음 애니메이션 프레임을 요청합니다
ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스를 지웁니다
particles.forEach((particle, index) => { // 모든 파티클에 대해 반복합니다
if (particle.alpha > 0 && particle.radius > 0) { // 파티클이 아직 보이는 경우
particle.update(); // 파티클을 업데이트합니다
} else {
particles.splice(index, 1); // 보이지 않는 파티클을 배열에서 제거합니다
}
});
}
window.addEventListener('mousemove', addParticle); // 마우스 움직임 이벤트에 함수를 연결합니다
animate(); // 애니메이션을 시작합니다
</script>
</body>
</html>
결과입니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] Color Flipper 만들기 (0) | 2024.03.08 |
|---|---|
| [Javascript] 다운로드 이미지 미리보기 만들기 (0) | 2024.03.05 |
| [JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 (0) | 2024.02.21 |
| [JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 (0) | 2024.02.12 |
| [JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 (0) | 2024.01.09 |
