- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기
웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.
HTML, CSS, JavaScript를 사용하여 간단하게 만들어 볼 것이다.
- falling-pixels.html
- HTML 파일에서는 기본적인 구조와 컨테이너 요소(pixel-container)를 정의한다.
- pixel-container는 픽셀들이 떨어질 영역을 지정한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Falling Animation</title>
<link rel="stylesheet" href="/falling-pixels/falling-pixels.css">
</head>
<body>
<div id="pixel-container"></div>
<script src="/falling-pixels/falling-pixels.js"></script>
</body>
</html>-falling-pixels.css
- pixel-container와 pixel 클래스에 대한 스타일을 지정한다.
- 픽셀의 크기, 초기 위치, 애니메이션 키프레임(@keyframes fall)을 설정하여 픽셀들이 떨어지는 동작을 구현한다.
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
#pixel-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.pixel {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
animation: fall 5s linear infinite;
}
@keyframes fall {
0% {
transform: translateY(-100px);
opacity: 1;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}- falling-pixels.js
- 픽셀을 생성하고, 랜덤한 위치와 애니메이션 지속 시간을 설정하는 JavaScript 코드를 작성한다.
- 각 픽셀이 애니메이션이 끝난 후 제거되도록 하여 화면을 정리한다.
const pixelContainer = document.getElementById('pixel-container');
function createPixel() {
const pixel = document.createElement('div');
pixel.classList.add('pixel');
// 수평 위치를 랜덤으로 설정
pixel.style.left = `${Math.random() * 100}vw`;
// 픽셀들이 서로 다른 속도로 떨어지도록 랜덤한 애니메이션 지속 시간을 설정
pixel.style.animationDuration = `${5 + Math.random() * 2}s`;
// 픽셀을 컨테이너에 추가
pixelContainer.appendChild(pixel);
// 애니메이션이 끝나면 픽셀을 제거
pixel.addEventListener('animationend', () => {
pixel.remove();
});
}
// 일정 간격으로 새로운 픽셀을 생성
setInterval(createPixel, 500);
- 결과물
Pixel Falling Animation
algo-gaja.github.io