[Javascript] 눈 내리는 효과 만들기

JAVA SCRIPT

[Javascript] 눈 내리는 효과 만들기

혀누쓰0 2022. 6. 8. 00:48

https://hyunu0504.github.io/blog5/

눈

hyunu0504.github.io

티스토리에 코드블럭이랑 구분선이 있는지 처음 알았다

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="styleSheet" href="style.css" />
    <title>눈</title>
  </head>
  <body>
    <script src="./a.js"></script>
  </body>
</html>

CSS

body {
  margin: 0; /* 여백 제거 */
  background-color: rgba(0, 0, 0, 0.855); /* 배경 */
  overflow: hidden; /* 드래그바 삭제 */
}
.snow {
  background-color: white; /* 배경 */
  border-radius: 50%; /* 테두리 둥글게 */
  width: 8px; /* 가로 */
  height: 8px; /* 세로 */
  animation-name: sn; /* 키프레임 id */
  animation-duration: 5s; /* n초에 걸쳐서 실행 */
  animation-iteration-count: infinite; /* 실행이 끝나면 다시 실행 */
  animation-timing-function: linear; /* 일정한 속도로 실행 */
  opacity: 0; /* 투명도 */
}
.snow:nth-child(2n) {
  /* snow라는 class의 2의 배수만 선택 */
  width: 7px; /* 가로 */
  height: 7px; /* 세로 */
  animation-duration: 5s;
  animation-delay: 1s; /* n초후에 실행 */
}
.snow:nth-child(3n) {
  /* snow라는 class의 3의 배수만 선택 */
  width: 6px; /* 가로 */
  height: 6px; /* 세로 */
  animation-duration: 6s; /* n초에 걸쳐서 실행 */
  animation-delay: 2s; /* n초후에 실행 */
}
.snow:nth-child(5n) {
  /* snow라는 class의 5의 배수만 선택 */
  width: 5px; /* 가로 */
  height: 5px; /* 세로 */
  animation-duration: 7s;
  animation-delay: 3s;
}
.snow:nth-child(7n) {
  /* snow라는 class의 7의 배수만 선택 */
  width: 4px; /* 가로 */
  height: 4px; /* 세로 */
  animation-duration: 8s; /* n초에 걸쳐서 실행 */
  animation-delay: 4s; /* n초후에 실행 */
}
@keyframes sn {
  50% {
    /* 0%에서 50%가 될때까지 실행할 코드 */
    transform: translateY(50vh); /* y축 50vh만큼 이동 */
    opacity: 0.6; /* y축 50vh만큼 이동 */
  }
  75% {
    /* 50%에서 75%가 될때까지 실행할 코드 */
    opacity: 0; /* 투명도 0 */
  }
  100% {
    /* 75%에서 100%가 될때까지 실행할 코드 */
    transform: translateY(100vh); /* y축 100vh만큼 이동 */
  }
}

Javascript

function addSnow(){
    const snows = document.createElement('div') // div를 생성하는것을 축약해서 snows라는 변수에 넣기
    snows.classList.add('snow') // snows에 snow라는 class로 선언
    document.body.append(snows) // 그것을 body요소에 넣기
    snows.style.marginLeft = randomSnow() + 'px' // snows의 marginleft값을 randomSnow()로 지정
}
function randomSnow(){
    return Math.floor( Math.random() * window.innerWidth ) // Math.randomn으로 무작위 값이 window 창의 가로크기 안에서의 값만
    //    Math.fllor로  그 값의 소수값은 받지않음
}
for( i = 0; i < 200; i++ ){ 
    addSnow(); //200번이 실행되는 for문
}