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?

Boundary and range description of between in mysql

Detailed explanation of several practical solutions for quickly deleting large amounts of data (tens of millions) in MySQL

The author recently encountered a performance bot...

Detailed explanation of simple snow effect example using JS

Table of contents

Preface

Main implementation code

HTML Code

JS code

Boundary and range description of between in mysql

Detailed explanation of the usage of two types of temporary tables in MySQL

MySQL latest version 8.0.17 decompression version installation tutorial

Summary of various implementation methods of mysql database backup

Basic usage of JS date control My97DatePicker

Why Nginx is better than Apache

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

Use of Linux ipcs command

SQL-based query statements

MySQL Optimization: InnoDB Optimization

Recommend

HTML page native VIDEO tag hides the download button function

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial

XHTML Getting Started Tutorial: What is XHTML?

Detailed explanation of MYSQL large-scale write problem optimization

How to Communicate with Other Users on the Linux Command Line

WeChat applet scroll-view realizes left-right linkage effect

Create a new user in Linux and grant permissions to the specified directory

About 3 common packages of rem adaptation

Detailed explanation of several practical solutions for quickly deleting large amounts of data (tens of millions) in MySQL

Solve the problem of inconsistency between mysql time and system time in docker

A brief talk about Rx responsive programming

How to use explain to query SQL execution plan in MySql

Detailed steps to install Nginx on Linux

How to prompt and open hyperlink a

Comparison of efficiency between single-table query and multi-table join query in MySql database