PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

🌊 author’s home page: Hai Young 🌊 Author profile: 🏆CSDN full stack quality creator, 🥇HDZ core group member 🌊 Fan benefits: fans send 6~9 books every week, send a variety of small gifts from time to time, the award will be announced

May this year be a good one for you and me

I wish you all a happy New Year. This is my first article of 2022. I hope to bring you something fun and interesting

Will bring you some interesting articles on the theme of Spring Festival

  • Watch Snow with Xiao Hai – Simple snow effects with HTML, CSS and JS
  • HTML, CSS and JS implement the countdown timer for the 2022 New Year
  • HTML, CSS and JS implementation fireworks
  • Mobile responsive design
  • .

Simple snow effects using HTML, CSS and JS

Many southern friends may not have seen or never seen snow, today I give you a small Demo, simulate the snow scene, first let’s take a look at the effect

You can check it out online at 👉haiyong.site/xiaxue First look at the project structure, a snowflake image, an.html file and jquery-1.4.2.js

I have put the pictures of snowflakes used here, or you can directly use the address of the pictures I uploaded to my website:Haiyong. Site/wp – the content /…Open a map, content all rely on JS.

The HTML code

Here’s the HTML. There’s nothing there

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sea have 🌊 | snow piece</title>
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<meta name="keywords" content="Snow flake by flake." />
		<meta name="description" content="Snow tools | piece; Aspire to build a fishing site with 100 small games. Made By Haiyong, Technical support -" /> 
		<meta name="author" content="Sea have (http://haiyong.site/moyu)" />
		<meta name="copyright" content="Sea have (http://haiyong.site/moyu)" />
		<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" sizes="192x192" />
		<style type="text/css">
			body{
				background-color: # 000000;
				margin: 0;/* Remove the built-in margins */
			}
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<script src="Js/jquery - 1.4.2. Js" type="text/javascript" charset="utf-8"></script>		
	</body>
</html>
Copy the code

JS code:

Add snow pictures, first open timer here < img SRC = “images/snow. PNG ‘> can be changed to < img SRC =” http://haiyong.site/wp-content/uploads/2021/12/snow.png “>

setInterval(function(){
var img = $("<img src='images/snow.png'>");
$("body").append(img);
Copy the code

Set the size of the snowflake to 10-20px, and the formula below represents (0-10 + 10)px

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

Get screen width

var w = $(window).width();
Copy the code

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

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

Give the resulting random 1EFT to the image

img.css("left",left+"px");
Copy the code

Add animation of snowflake movement to get distance of snowflake movement = screen height – snowflake size

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

The code in the comments below is used to clear the cache with or without it.

img.animate({"top":top+"px"},size*100)
/*.fadeout (1000,function(){img.remove(); //console.log($("img").length); }); * /
},10)
Copy the code

Uncomment and you’ll see that the snow will disappear, as shown belowIf you like the snow, you can comment it out and preview it like this

Here we are going to the effect of the implementation is completed, if you’re running time is too long can lead to excessive memory footprint caton phenomenon, can be the content of the HTML code in the last paragraph of the annotation uncomment, this will slowly fade out to the snow and remove deleted, but I think the snow also look good, don’t let it melt, Like the following 👇

Why not give them the romance of a programmer?

If you have trouble copying the above code, you can create the project as follows

There are many beginners who don’t know how to put all this code together. I’ve put all the code together for beginners. Concern public number [sea] reply [snow] to obtain the complete source code.

Hopefully, with this tutorial, you’ll also be able to implement simple snow effects using HTML5.

The author is determined to build a fishing site with 100 small games/tools, update progress: 50/100

I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my post on how to implement simple snow effects using HTML, CSS, and JS. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊

💌 welcomes your comments and suggestions in the comments section! 💌