Of Stack

It snows javascript to realize snowflakes flying

  • 2021-02-17 06:15:55
  • OfStack

The example of this paper for everyone to share the snowflake flying effect javascript implementation, for your reference, the specific content is as follows

Principle:

1, js dynamically create DIV, specify CLASS class set different background image style to display different snowflake effect.

2, js Gets the created DIV and changes the value of its top attribute. When the fall height is greater than the screen height, delete the moved div

3. Do not spray if it is not perfect

Effect preview: http: / / wjf444128852 github. io demo02 / snow/index html

HTML code: 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> snow </title>
 <link rel="stylesheet" href="css/index.css">
 <script src="js/move.js"></script>
</head>
<body>
 <div class="snow_parent" id="js_sonw">
 
 </div>
</body>
</html>

CSS code 


*{
 margin:0;
 padding:0;
 list-style: none;
 border: none;
}
body{
 width: 100%;
 height:600px;
 background:#000;
}
.snow_parent{
 position: relative;
 width: 100%;
 height:100%;
 overflow: hidden;
 margin: 0 auto;
}
.snow_parent div.parent{
 background-image: url(../img/snow.png);
 float: left;
 -webkit-transform: scale(.1);
 -moz-transform: scale(.1);
 -o-transform: scale(.1);
 -ms-transform: scale(.1);
 transform: scale(.1);
 position: absolute;
}
.snow_one{
 width: 180px;
 height: 180px;
 background-position:0 0;
 background-repeat: no-repeat;
 left:-70px;
 top: -95px;
}
.snow_two{
 width: 140px;
 height: 140px;
 background-position:-220px -18px;
 left:-30px;
 top: -75px;
}
.snow_three{
 width:150px;
 height: 150px;
 background-position:-400px -15px;
 left:-20px;
 top: -80px;
}
.snow_four{
 width: 160px;
 height: 160px;
 background-position:-10px -206px; 
}
.snow_four{
 left:-10px;
 top: -85px;
}

JS code: 


/*
 creatBy jiucheng 2016-4-24
*/ 
window.onload=function(){
 init();
}
//  create DIV
function creatDiv(){
 //  create DIV And appends to the parent element 
 var snowDiv=document.createElement("div");
 document.getElementById("js_sonw").appendChild(snowDiv);
 //  To create a DIV the class Is random and displays different snowflakes 
 var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];
 var index=Math.floor(Math.random()*whatName.length);
 snowDiv.className=whatName[index];
 //  To get the DIV the left Attribute values ( random ) And assign a value to the created DIV
 var whatLeft=getLeft()+'px';
 snowDiv.style.left=whatLeft;
 return snowDiv;
}
//  Access to random left Attribute values 
function getLeft(){
 //  To get the DIV One of the biggest left The value of the attribute is the width of the parent element 
 var eleParent=document.getElementById("js_sonw");
 //  Gets all of the parent elements style style 
 var style=window.getComputedStyle(eleParent);
 // CSS In the left It's a negative number and we have to subtract it from here 
 var maxWidth=parseInt(style.width)+70;
 //  Let the creating DIV the left For the random value 
 var randomLeft=Math.floor(Math.random()*maxWidth);
 return randomLeft;
}
//  Let's move it down 
function moveDown(){
 //  Getting Moving Objects 
 var moveElem=creatDiv();
 //  Gets all of the moved object style Attribute values 
 var eleStyle=window.getComputedStyle(moveElem);
 //  To get it top Attribute values 
 var eleTop=parseInt(eleStyle.top);
 //  Set timer to dynamically change moving objects top Attribute values 
 var t=setInterval(function(){
 eleTop++;
 //  The new top Value is paid to the moving object 
 moveElem.style.top=eleTop+"px";
 //  When you hit the height of the screen, stop the timer and remove the moving object from the parent element 
 if(eleTop>=window.innerHeight){ 
  clearInterval(t);
  document.getElementById("js_sonw").removeChild(moveElem);
 } 
 },10);// Falling speed is zero. 10 Ms whereabouts 1px
}
function init(){
 //  Get and set dynamically body The height of the 
 document.body.style.height=window.innerHeight+"px";
 //  every 500 Milliseconds to create 1 Move objects and execute the move function 
 var t=setInterval(function(){
 moveDown();
 },100);
}

The above is all the content of this article, I hope you learn javascript programming help.

Related articles: