웹 사이트에 눈❄ 내리기

zzincode·2022년 12월 31일
0

JavaScript

목록 보기
1/24
post-thumbnail

1. 눈송이 만들기

<title>Snow</title>
    <style>
      body {
        background-color: #323455;
      }
      .snowflake {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        position: absolute; /*눈송이 감추기*/
        top: -8px; /*화면 밖에 위치*/
      }
    </style>
  </head>
  <body>
   <div class = "snowflake"></div>
  </body>
</html>

2. 눈송이 애니메이션 만들기

- fall 애니메이션

@keyframes fall {
        from {
        } /*시작할 위치*/
        to {
          transform: translateY(100vh); /*화면 끝까지 이동*/
          opacity: 0;
        }
      }

- fall 애니메이션 snowflake에 추가

.snowflake {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        position: absolute; /*눈송이 감추기*/
        top: -8px;
        animation : fall 10s linear;
      }

4. HTML 요소를 JS를 활용

- HTML <div class = " snowflake"> 삭제 → (자바스크립트로 HTML요소 생성)

function makeSnowflake() {
        const snowflake = document.createElement("div"); //div 요소 추가
        
        snowflake.classList.add("snowflake"); // snowflake에 class 값 추가
    }       

5. 눈송이 떨어지는 장소 랜덤화

const body = document.querySelector("body"); //body불러오기

function makeSnowflake() {
        const snowflake = document.createElement("div"); 
        
        snowflake.classList.add("snowflake");
        snowflake.style.left = `${Math.random() * window.screen.width}px`; 
        //눈송이를 왼쪽으로 이동
        
        body.appendChild(snowflake); //body에 눈송이 추가
    }       

6. makeSnowflake 함수 호출

for (let index = 0; index < 50; index++) {
       makeSnowflake();
      }

7. 눈송이 디테일 추가

- 눈송이들마다 애니메이션 지연

function makeSnowflake() {
        const snowflake = document.createElement("div");
        const delay = Math.random() * 10; //🟡
        
        snowflake.classList.add("snowflake");
        snowflake.style.left = `${Math.random() * window.screen.width}px`;
        snowflake.style.animationDelay = `${delay}s`; //🟡
        
        body.appendChild(snowflake);
    }       

- 깊이감 → 불투명도 무작위

function makeSnowflake() {
        const snowflake = document.createElement("div");
        const delay = Math.random() * 10;
        const initialOpacity = Math.random(); //🟡

        snowflake.classList.add("snowflake");
        snowflake.style.left = `${Math.random() * window.screen.width}px`;
        snowflake.style.animationDelay = `${delay}s`;
        snowflake.style.opacity = initialOpacity; //🟡

        body.appendChild(snowflake);
      }

- 눈송이마다 지속시간 변경

css snowflake 애니메이션 삭제 → (JS로 눈송이 무작위 지속시간)
const MIN_DURATION = 10; //🟡 애니메이션 최소 지속 시간

function makeSnowflake() {
        const snowflake = document.createElement("div");
        const delay = Math.random() * 10;
        const initialOpacity = Math.random();
        const duration = Math.random() * 20 + MIN_DURATION; //🟡

        snowflake.classList.add("snowflake");
        snowflake.style.left = `${Math.random() * window.screen.width}px`;
        snowflake.style.animationDelay = `${delay}s`;
        snowflake.style.opacity = initialOpacity;
        snowflake.style.animation = `fall ${duration}s linear`; //🟡

        body.appendChild(snowflake);

8. 애니메이션 사라지면 페이지에서 제거

- 사라진 눈송이 흔적 제거(개발자 도구에서 확인 가능)

setTimeout(() => {
          body.removeChild(snowflake);
        }, (duration + delay) * 1000);
      }

=> 무한한 눈송이 생성

setTimeout(() => {
          body.removeChild(snowflake);
          makeSnowflake(); //🟡
        }, (duration + delay) * 1000);
      }

- 눈송이 동시에 만들지 않고 약간의 지연 후 생성

 for (let index = 0; index < 50; index++) {
        setTimeout(makeSnowflake, 500 * index);
      }

📌완성코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snow</title>
    <style>
      body {
        background-color: #323455;
      }
      .snowflake {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
        position: absolute; /*눈송이 감추기*/
        top: -8px;
      }

      @keyframes fall {
        from {
        }
        to {
          transform: translateY(100vh); /*화면 끝까지 이동*/
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <script>
      const body = document.querySelector("body");

      const MIN_DURATION = 10;

      function makeSnowflake() {
        const snowflake = document.createElement("div");
        const delay = Math.random() * 10;
        const initialOpacity = Math.random();
        const duration = Math.random() * 20 + MIN_DURATION;

        snowflake.classList.add("snowflake");
        snowflake.style.left = `${Math.random() * window.screen.width}px`;
        snowflake.style.animationDelay = `${delay}s`;
        snowflake.style.opacity = initialOpacity;
        snowflake.style.animation = `fall ${duration}s linear`;

        body.appendChild(snowflake);

        setTimeout(() => {
          body.removeChild(snowflake);
          makeSnowflake();
        }, (duration + delay) * 1000);
      }

      for (let index = 0; index < 50; index++) {
        setTimeout(makeSnowflake, 500 * index);
      }
    </script>
  </body>
</html

참고영상

0개의 댓글