Detailed explanation of simple snow effect example using JS

Detailed explanation of simple snow effect example using JS

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?

Recommend

【HTML element】How to embed images

The img element allows us to embed images in HTML...

MySQL 5.7 deployment and remote access configuration under Linux

Preface: Recently I am going to team up with my p...

React's method of realizing secondary linkage

This article shares the specific code of React to...

Detailed explanation of mandatory and implicit conversion of types in JavaScript

Table of contents 1. Implicit conversion Conversi...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

WeChat applet development form validation WxValidate usage

I personally feel that the development framework ...

Detailed tutorial on deploying Apollo custom environment with docker-compose

Table of contents What is the Apollo Configuratio...

WeChat applet calculator example

This article shares the specific code of the WeCh...

Tutorial on installing JDK Tomcat MySQL on Linux (remote access using Mac)

One environment Alibaba Cloud Server: CentOS 7.4 ...

Nginx signal control

Introduction to Nginx Nginx is a high-performance...

CSS fills the parent container div with img images and adapts to the container size

When multiple images are introduced into a page, ...

Definition and usage of MySQL cursor

Creating a Cursor First, create a data table in M...

MySql inserts data successfully but reports [Err] 1055 error solution

1. Question: I have been doing insert operations ...

Summary of common sql statements in Mysql

1. mysql export file: SELECT `pe2e_user_to_compan...

Radio buttons and multiple-choice buttons are styled using images

I've seen people asking before, how to add sty...