Javascript Snowfall Effect Example

Comments (0)

Views (1437)

I have prepared a small example for those who want to make snow on their website in cold winter days, you can make snow on your websites by applying the example below.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snowfall</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="snow"></div>
	<div class="container">
		<input type="checkbox" id="toggle_snow" checked="true" onclick="toggle_snow()"> ToggleSnow </input>
		<h1 style="text-align:center;">phpexample.NET</h1>
		<div style="margin:30px auto"><div id="carbon-block"></div></div>
	</div>
<script src="./PureSnow.js"></script>
</body>

</html>

CSS

body {
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #34A65F 0%, #0F8A5F 100%);
    overflow: hidden;
    color: white;
    font-family: 'Inter';
}

.snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(white, white); /* Workaround for Chromium's selective color inversion */
    border-radius: 50%;
    filter: drop-shadow(0 0 10px white);
}

.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

let snowflakes_count = 200;

// let base_css = ``; // Put your custom base css here

if (typeof total !== 'undefined'){
    snowflakes_count = total;
}


// This function allows you to turn on and off the snow
function toggle_snow() {
    let check_box = document.getElementById("toggle_snow");
    if (check_box.checked == true) {
        document.getElementById('snow').style.display = "block";
    }
    else {
        document.getElementById('snow').style.display = "none";
    }
}

// Creating snowflakes
function spawn_snow(snow_density = 200) {
    snow_density -= 1;

    for (let x = 0; x < snow_density; x++) {
        let board = document.createElement('div');
        board.className = "snowflake";

        document.getElementById('snow').appendChild(board);
    }
}

// Append style for each snowflake to the head
function add_css(rule) {
    let css = document.createElement('style');
    css.type = 'text/css';
    css.appendChild(document.createTextNode(rule)); // Support for the rest
    document.getElementsByTagName("head")[0].appendChild(css);
}



// Math
function random_int(value = 100){
    return Math.floor(Math.random() * value) + 1;
}

function random_range(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


// Create style for snowflake
function spawnSnowCSS(snow_density = 200){
    let snowflake_name = "snowflake";
    let rule = ``;
    if (typeof base_css !== 'undefined'){
        rule = base_css;
    }
    
    for(let i = 1; i < snow_density; i++){
        let random_x = Math.random() * 100; // vw
        let random_offset = random_range(-100000, 100000) * 0.0001; // vw;
        let random_x_end = random_x + random_offset;
        let random_x_end_yoyo = random_x + (random_offset / 2);
        let random_yoyo_time = random_range(30000, 80000) / 100000;
        let random_yoyo_y = random_yoyo_time * 100; // vh
        let random_scale = Math.random();
        let fall_duration = random_range(10, 30) * 1; // s
        let fall_delay = random_int(30) * -1; // s
        let opacity_ = Math.random();

        rule += `
        .${snowflake_name}:nth-child(${i}) {
            opacity: ${opacity_};
            transform: translate(${random_x}vw, -10px) scale(${random_scale});
            animation: fall-${i} ${fall_duration}s ${fall_delay}s linear infinite;
        }

        @keyframes fall-${i} {
            ${random_yoyo_time*100}% {
                transform: translate(${random_x_end}vw, ${random_yoyo_y}vh) scale(${random_scale});
            }

            to {
                transform: translate(${random_x_end_yoyo}vw, 100vh) scale(${random_scale});
            }
            
        }
        `
    }

    add_css(rule);
}

// Load the rules and execute after the DOM loads
window.onload = function() {
    spawnSnowCSS(snowflakes_count);
    spawn_snow(snowflakes_count);
};

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !

Javascript Snowfall Effect Example

Comments

Popular Articles

Popular Tags