[Toy Project] 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기 [CSS 애니메이션과 JavaScrip
- 웹페이지에서 랜덤한 픽셀 떨어뜨리기 애니메이션 구현하기웹페이지에서 픽셀들이 화면 상단에서 하단으로 랜덤하게 떨어지는 간단한 애니메이션을 구현해보려 한다.HTML, CSS, JavaScript를
yermi.tistory.com
- 떨어지는 픽셀이 바닥에 쌓이는 애니메이션 구현하기
이번에는 화면 상단에서 떨어지는 랜덤한 색상의 픽셀이 바닥에 쌓이는 애니메이션을 구현해보려고 한다.
- stacking-pixels.html
- pixel-container를 포함한 HTML 기본 구조를 설정한다.
- 이 컨테이너는 픽셀들이 쌓이는 공간이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Falling and Stacking Animation</title>
<link rel="stylesheet" href="/stacking-pixels/stacking-pixels.css">
</head>
<body>
<div id="pixel-container"></div>
<script src="/stacking-pixels/stacking-pixels.js"></script>
</body>
</html>- stacking-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;
bottom: 100%; /* 처음에는 화면 밖에 위치시킴 */
animation: fall linear forwards;
}
@keyframes fall {
0% {
bottom: 100%; /* 애니메이션 시작 시 화면 상단 밖에서 시작 */
opacity: 1;
}
100% {
bottom: 0; /* 애니메이션 종료 시 화면 하단에 도달 */
opacity: 1;
}
}- stacking-pixels.js
- 픽셀을 생성하고, 랜덤한 색상, 위치, 속도를 부여하는 코드를 작성한다.
- 픽셀이 바닥에 도달하면 그 위치에 고정되고, 이후 생성되는 픽셀은 그 위에 쌓이도록 한다.
const pixelContainer = document.getElementById('pixel-container');
const stackHeights = {}; // 각 x 위치별로 쌓이는 높이를 저장하는 객체
function createPixel() {
const pixel = document.createElement('div');
pixel.classList.add('pixel');
// 수평 위치를 더 세밀하게 설정 (0.1vw 단위로)
const leftPosition = (Math.floor(Math.random() * 1000) / 10).toFixed(1);
pixel.style.left = `${leftPosition}vw`;
// 픽셀의 색상을 랜덤으로 지정
const randomColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
pixel.style.backgroundColor = randomColor;
// 해당 위치에 쌓인 높이가 없으면 초기화
if (!stackHeights[leftPosition]) {
stackHeights[leftPosition] = 0;
}
// 픽셀들이 서로 다른 속도로 떨어지도록 랜덤한 애니메이션 지속 시간을 설정
const duration = 3 + Math.random() * 2;
pixel.style.animationDuration = `${duration}s`;
// 픽셀을 컨테이너에 추가
pixelContainer.appendChild(pixel);
// 애니메이션이 끝나면 픽셀의 위치를 고정하여 쌓이게 설정
setTimeout(() => {
pixel.style.animation = 'none'; // 애니메이션을 중지시킴
pixel.style.bottom = `${stackHeights[leftPosition]}px`; // 쌓여야 할 위치에 픽셀을 배치
stackHeights[leftPosition] += 5; // 다음 픽셀이 쌓일 높이를 증가시킴
}, duration * 1000);
}
// 일정 간격으로 새로운 픽셀을 생성
setInterval(createPixel, 100); // 간격을 줄여서 픽셀 생성 속도를 높임- 결과물
Pixel Falling and Stacking Animation
algo-gaja.github.io