Scribd
Upload
73 views

Javascript Snowfall

The document contains CSS and JavaScript code to create a snowfall animation effect. Small snowflake elements are cloned and appended to the container with randomized sizes, speeds, and delays to simulate falling snow. The flakes fall from the top of the screen and disappear after 3 seconds. A second example uses only CSS animations to achieve a similar snowfall effect with different sized snowflake elements falling at varying speeds.

Uploaded by

ccatalin10
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
73 views

Javascript Snowfall

The document contains CSS and JavaScript code to create a snowfall animation effect. Small snowflake elements are cloned and appended to the container with randomized sizes, speeds, and delays to simulate falling snow. The flakes fall from the top of the screen and disappear after 3 seconds. A second example uses only CSS animations to achieve a similar snowfall effect with different sized snowflake elements falling at varying speeds.

Uploaded by

ccatalin10
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML

<div class="container">
<i class="wi wi-snowflake-cold flake"></i>
<a href="https://reactgo.com/css-snow-animation/" target="_blank"
class="master">View Tutorial</a>
</div>

CSS
body {
font-family: sans-serif;
background: #070606e8;
background-image: url(http://photoshopdesire.com/wp-
content/uploads/2016/02/day2night-after-photoshop.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.container {
height: 100vh;
overflow: hidden;
}

.flake {
color: rgb(247, 252, 243);
font-size: 2rem;
padding: 1rem;
animation: fall 2s linear forwards infinite;
animation-delay: 1s;
}

@keyframes fall {
from {
transform: translateY(-10vh);
}
to {
transform: translateY(100vh);
}
}

.master{
color:white;
float:right;
}

@media only screen and (max-width: 800px) {


.flake {
font-size: 1rem;
animation-delay: 0s;
}

.master{
display:none;
}
}
JS
const flake = document.querySelector(".flake");
const container = document.querySelector(".container");

function createFlake() {
const clone = flake.cloneNode(true);
clone.style.paddingLeft = Math.random() * 10 + "px"; // creating left
padding
clone.style.animationDuration = Math.random() * 5 + 3 + "s"; // animation
duration between 3-5
clone.style.opacity = Math.random() * 1;
container.append(clone); // adding clone flake to container
}
const s = setInterval(createFlake, 100); // to create more flakes decrease 100

setTimeout(() => {
clearInterval(s);
}, 3000); // flake creation stops after 3000 milliseconds or 3s

// to add random colors add this code to createFlake method

/*
const randomC = Math.random() * 200;
const randomA = Math.random() * 200;
const randomB = Math.random() * 56;
clone.style.color = `rgb(${randomA + 256},${randomB + 200},${randomC +
100})`;

*/

Varianta 2

HTML
<div
class="snowflakes"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i>
</i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i><
/i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></
i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i
><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><
i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i
></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

CSS
html, body {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+
*/
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
min-height:100%;
}

.snowflakes {
width: 100%; height: 1200px;
position: absolute; top: -90px; left: 0;
}

i, i:after, i:before { background: white; }


i {
display: inline-block;
-webkit-animation: snowflakes 3s linear 2s 20;
-moz-animation: snowflakes 3s linear 2s 20;
position: relative;
}
i:after, i:before {
height: 100%;
width: 100%;
content: ".";
position: absolute;
top: 0px;
left: 0px;
-webkit-transform: rotate(120deg);
}
i:before { -webkit-transform: rotate(240deg); }

@-webkit-keyframes snowflakes {
0% {
-webkit-transform: translate3d(0,0,0) rotate(0deg) scale(0.6);
}
100% {
-webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg)
scale(0.6);
};
}

.snowflakes i:nth-child(3n) {
width: 16px; height: 4px;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 30;
-webkit-transform-origin: right -45px;
}

.snowflakes i:nth-child(3n+1) {
width: 24px; height: 6px;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: 45;
-webkit-transform-origin: right -30px;
}
.snowflakes i:nth-child(3n+2) {
width: 32px; height: 8px;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: 60;
-webkit-transform-origin: right -15px;
}

/* different delays so they don't all start at the same time */


.snowflakes i:nth-child(7n) {
opacity:.3;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+1) {
opacity:.4;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+2) {
opacity:.5;
-webkit-animation-delay: 1.5s;
-webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+3) {
opacity:.6;
-webkit-animation-delay: 2s;
-webkit-animation-timing-function:ease-in;
}
.snowflakes i:nth-child(7n+4) {
opacity:.7;
-webkit-animation-delay: 2.5s;
-webkit-animation-timing-function:linear;
}
.snowflakes i:nth-child(7n+5) {
opacity:.8;
-webkit-animation-delay: 3s;
-webkit-animation-timing-function:ease-out;
}
.snowflakes i:nth-child(7n+6) {
opacity:.9;
-webkit-animation-delay: 3.5s;
-webkit-animation-timing-function:ease-in;
}

You might also like