CSS 눈 내리는 효과 feat. JS

 

 

   

 

 

Demo

 

 

[Demo] CSS 눈 내리는 효과. (feat. JS)

 

 

 

 

 

 

Installation

 

 

SCSS는 아래의 링크에서 CSS로 변환한 다음, 스킨 편집 - CSS에 추가.

스크립트는 스킨 편집 - HTML에서, </body> 태그 윗 라인에 스크립트 삽입.

 

SassMeister | The Sass Playground!

 

 

그리고, CSS의 눈송이 개수와 스크립트의 for 루프 구문의 두 번째 조건값은 동일하게 맞춰줄 것!

CSS ⇢ $total: 200;

Javascript ⇢ for ( let i =0; i < 200; i++ ) {

 

 

 

 

 

 

Code

 

 

Snow (Pure CSS)

 

body {
overflow-x: hidden;
}

@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}

.snow {
$total: 200; /* 눈송이 갯수 */
/*position: absolute;*/
position: fixed;
width: 10px;
height: 10px;
background: white; /* 눈송이 컬러 */
border-radius: 50%;
filter: drop-shadow(0 0 10px white);
z-index: 9999;

@for $i from 1 through $total {
$random-x: random(1000000) * 0.0001vw;
$random-offset: random_range(-10000, 10000) * 0.001vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(30000, 80000) / 100000;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random(10000) * 0.0001;
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;

&:nth-child(#{$i}) {
opacity: random(10000) * 0.0001;
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}

@keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
}

to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}

 

for ( let i = 0; i < 200; i++ ) {
	document.querySelector('body').insertAdjacentHTML('afterbegin','<div class="snow"></div>')
}

 

 

 

 

 

 

CSS 압축하기

 

 

CSS 압축도구