[HTML, CSS, JS] Animation 효과로 눈내리는 배경화면 만들기

이번 프로젝트는 유튜버 '수코딩'님의 무료강의를 토대로 진행했다. 

 

강의를 본지는 좀 된 것 같고, 이번 프로젝트는 그때 기억을 되살려 혼자 해보았다.

 

핵심 기능

• CSS : animation, @keyframes, nth-child
• JS : Math, for loop

---

 

완성본

---

HTML에는 아무런 요소도 추가하지 않았다.

---

body {
  width: 100%;
  height : 100vh;
  background : linear-gradient(#0C1C3E,#394269);
  overflow: hidden;
}

#snow {
  background-color: #FFF;
  width: 25px;
  height: 25px;
  opacity: 0;
  border-radius: 50%;
  animation : snow 3s infinite linear;
}

#snow:nth-of-type(odd) {
  animation-delay: 3s;
  animation-duration: 7s;
  width : 30px;
  height : 30px;
  color : #eee;
}

#snow:nth-of-type(even) {
  animation-delay: 2s;
  animation-duration: 4s;
  width : 15px;
  height : 15px;
}

#snow:nth-of-type(n+3) {
  animation-delay: 1s;
  width : 20px;
  height : 20px;
}

@keyframes snow {
  20% {
    transform: translate(25px, 20vh) scale(.8);
    opacity: 1;
  }
  40% {
    transform: translate(-25px, 40vh) scale(.6);
    opacity: .8;
  }
  60% {
    transform: translate(25px, 60vh) scale(.4);
    opacity: .6;
  }
  80% {
    transform: translate(-25px, 80vh) scale(.2);
    opacity: .4;
  }
  100% {
    transform: translate(25px, 100vh) scale(0);
    opacity: .2;
  }
}

CSS 코드

 

@keyframes로 원하는 애니메이션을 만든 후 사용할 선택자에 animation을 이용해 추가해 준다.

 

animation 기능은 animation-name, animation-delay, animation-duration, animation-iteration-count 등의 많은 속성값을 갖고 있으며, background 기능과 같이 animation에 속성값을 붙여 쓸 수 있다.

위의 코드값을 보면 animation : snow 3s infinite linear;

" snow라는 애니메이션을 || 3초 동안 || 계속해서 || 균등하게 " 보여주세요.라는 뜻이 되겠다.

 

그다음은 CSS 가상 선택자 중 하나인 nth-child 선택자이다.

위의 코드와 같이 짝수, 홀수, 수식을 통해 임의 값을 지정할 수 있다. 

각각의 선택자를 통해 눈이 내리는 효과에 차이를 줘 자연스러움을 더해줬다.

---

const bodyWidth = document.body.offsetWidth;

function getMargin(a) {
  return Math.floor(Math.random() * a);
}

function makeSnow() {
  const snow = document.createElement('div');
  snow.setAttribute('id','snow');
  snow.style.marginLeft = `${getMargin(bodyWidth)}px`;
  document.body.appendChild(snow);
}

for(let i = 0; i < 200; i++) {
  makeSnow();
}

JS 코드

 

짧으면서도 어렵지 않은 코드였다.

 

• makeSnow라는 함수를 통해 하나의 div태그를 생성.
• setAttribute 속성으로 id 값을 할당.
• body 요소의 넓이 값이 최대인 무작위 정수를 뽑아 div 요소의 margin-left값을 주어 위치를 다르게 함.
• 마지막으로 for 반복문을 통해 여러 개의 눈송이를 만듦.