Detailed explanation of simple snow effect example using JS

Preface
Main implementation code

HTML Code
JS code

Preface

Many friends in the south may have rarely seen or never seen snow. Today I will bring you a small demo to simulate the snow scene. First, let's take a look at the running effect

You can click to see it running online http://haiyong.site/xiaxue

First, let’s take a look at the project structure, a snowflake image, an .html file and jquery-1.4.2.js

I have put the snowflake picture used here, or you can directly use the picture address I uploaded to my website: http://haiyong.site/wp-content/uploads/2021/12/snow.png. Start with a picture, and the content depends entirely on JS.

Main implementation code

HTML Code

Here is the content in html, nothing

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sea embraces 🌊 | Snow falls one by one</title>
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<meta name="keywords" content="Snow flakes" />
		<meta name="description" content="Tools | Snow one by one; determined to create a website with 100 small games. Made by Haiyong, technical support - Haiyong" /> 
		<meta name="author" content="海拥(http://haiyong.site/moyu)" />
		<meta name="copyright" content="海拥(http://haiyong.site/moyu)" />
		<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" rel="external nofollow" sizes="192x192" />
		<style type="text/css">
			body{
				background-color: #000000;
				margin: 0;/* Remove the built-in margin*/
			}
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>		
	</body>
</html>

JS code

First, turn on the timer to add a snowflake image. 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);

Here the size of the snowflake is set to 10-20px. The following formula represents (0-10 + 10)px

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

Get 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 the animation of snowflake movement, and 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 and can be added or not.

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//Execute this code when the animation is complete to clear the cache img.remove();
	//console.log($("img").length);
}); */
},10)

Uncomment this and you will see the falling snow disappear, as shown below.

If you like to see snow accumulation, you can comment it out, and the preview effect will be like this:

At this point, the effect we want to achieve is complete. If the running time is too long, it may cause excessive memory usage and cause lag. You can uncomment the content in the last comment in the HTML code, so that the snow below will slowly fade out and be removed. However, I think the snow is also very beautiful, so I didn't let it melt, like this

This is the end of this article about the detailed explanation of the simple snow effect example implemented in JS. For more relevant JS simple snow effect content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Example code for implementing snow effects with JavaScript
js special effects, a small example of snow on the page
Detailed explanation of three commonly used web effects in JavaScript
Native JS to achieve image marquee effects
Native JS to achieve blinds special effects
Native JS to achieve book flipping effects

<<: Very practical MySQL function comprehensive summary detailed example analysis tutorial

>>: What are inline elements and block elements?

Two ways to exit bash in docker container under Linux

Detailed explanation of simple snow effect example using JS

Table of contents

Preface

Main implementation code

HTML Code

JS code

Two ways to exit bash in docker container under Linux

Detailed explanation of the mysql database LIKE operator in python

MySQL 5.6 root password modification tutorial

Summary of essential breakpoint debugging techniques for JavaScript (recommended)

How to process blob data in MySQL

Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7

MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)

Use of marker tags in CSS list model

How to install Mysql5.7 in Centos6

Programs to query port usage and clear port usage in Windows operating system

Recommend

How to upload the jar package to nexus via the web page

The whole process of configuring reverse proxy locally through nginx

An article to help you understand jQuery animation

Use CSS to easily implement some frequently appearing weird buttons

Difference between src and href attributes

How to migrate sqlite to mysql script

A simple way to clear the CSS, JavaScript and background image cache in the browser

Mysql database design three paradigm examples analysis

How to understand the difference between computed and watch in Vue

How to quickly build your own server detailed tutorial (Java environment)

The implementation process of extracting oracle data to mysql database

How to install Jenkins on CentOS 8

HTML table tag tutorial (19): row tag

Detailed steps for using jib for docker deployment in Spring Cloud

Analyze the problem of transferring files and other parameters in the upload component of element-ui