JavaScript: snow effect

Keywords: Javascript JQuery

Before I start typing, I need to figure out a few questions:
1. The way snow flakes exist, I use < div > A kind of < / div > to represent a snowflake;
2. The size of snow flakes should be in a range and random;
3. The transparency of snow flakes should also be changed. The color of newly emerged snow flakes will surely be darker than that of falling snow flakes for a certain time;
4. The location of snow flakes should also be random, so the location of the last falling should also be random;
5. Most importantly, because snow flakes exist in the form of div, when snow flakes fall to the bottom, the div should disappear, rather than exist in the page all the time, increasing the burden of the page.

Here is the code:

html code:

<!DOCTYPE html>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/Snow drift demo1.css" />
        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
        <script type="text/javascript" src="js/Snow drift demo1.js" ></script>
        <title>js Snow effect of small cases</title>
        <!--Here you can add a music player to play your favorite songs-->
        <!--<audio src="Music links" controls="controls" autoplay="autoplay"></audio>-->

css code

    padding: 0;
    margin: 0;

    overflow: hidden;//In order to prevent the overlap of snow flakes and browsers from causing scrollbars in browsers, overflow: hidden should be used;
    background-color: black;//I use black as the background here. You can also choose photos according to your preference. The code is as I noted below
    /*background-image: url(../img/7.jpg);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;

js code, jQuery is used here

var JGtime = 10 + Math.random()*100;//Time interval between snowflakes
var flake = $("<div>❄</div>").css("position","absolute");//Snowflake object
    setInterval(function(){//Generate a snowflake every JGtime     
    var dWidth = $(document).width();//Get browser page width
    var dHeight = $(document).height();//Get browser page height
    var startLeft = Math.random()*dWidth;//Random distance to the left before falling
    var endLeft = Math.random()*dWidth;//Random distance on the left after falling
    var flakeSize = 6 + Math.random()*50;//Flake Size 
    var startOpacity = 0.7+0.3*Math.random();//Transparency at the beginning
    var endOpacity = 0.4 + 0.3*Math.random();//Transparency left behind
    var durationTime = 4000+8000*Math.random();//Time is random. So the speed is random
    flake.clone().appendTo($("body")).css({//Copy a snowflake object, add it to the body, where it appears
        "color":"white",//My snowflake is white. If you want the color to be random, please refer to the random color method in my last article (H5 +JavaScript generate verification code).
        $(this).remove();//When the snow comes to the end, call the callback function to make it disappear, in order to keep the page smooth
    });//After a random time, it becomes the state above

Posted by brokencode on Fri, 01 May 2020 23:25:32 -0700