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>
<html>
<head>
<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>
</head>
<body>
<!--Here you can add a music player to play your favorite songs-->
<!--<audio src="Music links" controls="controls" autoplay="autoplay"></audio>-->
</body>
</html>
css code
*{
padding: 0;
margin: 0;
}
body{
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
$(function(){
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
"left":startLeft,
"top":"-56px",
"font-size":flakeSize,//Size
"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).
"opacity":startOpacity
}).animate({
"left":endLeft,
"opacity":endOpacity,
"top":dHeight
},durationTime,function(){
$(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
},JGtime);
});