HTML+CSS+JS realizes snowflakes flying (code sharing)

How to achieve snowing effects using HTML CSS JS? The following article will share with you an example of how to implement snowflakes in HTML CSS JS. I hope it will be helpful to you.

Many friends from the south may not have seen much or have never seen snow. Today I bring you a small demo that simulates a snow scene. First, let us take a look at the running effect

You can click to see the online operation: http://haiyong.site/xiaxue

First look at the project structure, a snowflake picture, a. I have put the snowflake image used in the html file and jquery-1.4.2.js

here, or you can directly use the image address: https://img.php .cn/upload/article/000/000/024/61dea8bfbe598211.png There is a picture at the beginning, and the content is all based on JS.

HTML code

The following is the content in the html, nothing much

nbsp;html>

	
		<meta>
		<title>海拥| 雪一片一片</title>
		<meta>
		<meta>
		<meta> 
		<meta>
		<meta>
		<link>
		<style>
			body{
				background-color: #000000;
				margin: 0;/* 去掉自带的外边距 */
			}
			img{
				position: absolute;
			}
		</style>
	
	
		<script></script>		
	

JS code:

First, start the timer to add snowflake images. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif" class="lazy" alt="HTML+CSS+JS realizes snowflakes flying (code sharing)" > can be changed to <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif" class="lazy" alt="HTML+CSS+JS realizes snowflakes flying (code sharing)" >

setInterval(function(){
var img = $("<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif"  class="lazy"  src=&#39;images/snow.png&#39; alt="HTML+CSS+JS realizes snowflakes flying (code sharing)" >");
$("body").append(img);

The size of the snowflake is set here to 10-20px, and the following formula means (0-10 10)px

var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");

Get the screen width

var w = $(window).width();

The value range should be 0-screen width-snowflake width

var left =parseInt(Math.random()*(w-size));

Give the random 1eft obtained to the picture

img.css("left",left+"px");

Add Animation of snowflake movement, get the distance of snowflake movement = screen height - snowflake size

var top = $(window).height()-size;

The code in the comments below is used to clear the cache, you can add it or not.

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//当动画完成时执行此代码，清除缓存
	img.remove();
	//console.log($("img").length);
}); */
},10)

If you uncomment, you will see that the falling snow will disappear, as shown in the picture below

If you like to see the snow, you can comment it out, preview The effect is as follows

#The effect we want to achieve is completed here. If the running time is too long, it may cause excessive memory usage and cause lag. You can change the html Uncomment the content in the last comment in the code, so that the snow below will slowly fade out and be deleted. However, I think the snow is pretty good-looking, so I don’t let it melt, like this:

(Learning video sharing: css video tutorial)

The above is the detailed content of HTML+CSS+JS realizes snowflakes flying (code sharing). For more information, please follow other related articles on the PHP Chinese website!