jQuery implements sample code for cherry blossom falling special effects on web pages

This article mainly introduces jQuery to realize the special effect of cherry blossom falling on web pages. The effect is very good. Friends who need it can refer to it. I hope it can help everyone.

Reason for development

• I saw a girl’s desktop background with a cherry blossom tree in class, and immediately came up with the idea of ​​making cherry blossoms fly on the web page. Dedicate this plug-in to that female classmate;

• I have developed application plug-ins such as focus pictures, rotation pictures, waterfall flow, etc., but this is the first time I have made this type of plug-in, so what are you interested in? That’s right;

Development tools

• Jquery+webstorm, no need to configure any additional environment, mobile terminal cannot be used

Effect Demonstration

In order to be more conspicuous, the background was changed to black. The gif image is a bit laggy, but the actual effect is relatively smooth.

For detailed effects, please see Github

Usage method

• Add html code to the page where the effect needs to be added. It is best to place it in the first tag under the body element

<p class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</p>

• Import the js code where each variable can be changed as needed

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成樱花
     image_min:10,//花瓣最小宽度和高度
     image_max:50,//花瓣最大宽度和高度
     time_min:10000,//花瓣最快下坠时间
     time_max:20000,//花瓣最慢下坠时间
     interval:500//花瓣生成时间间隔
   })
 })

js plug-in

• IIFE (immediately execute anonymous function)

• $.extend(), extension plug-in defines default parameters

• randomNum() sets [m,n] type random number

Related recommendations:

JavaScript to realize personalized navigation bar special effects

Using H5 to create fireworks particle special effects Method

css water wave button special effect

The above is the detailed content of jQuery implements sample code for cherry blossom falling special effects on web pages. For more information, please follow other related articles on the PHP Chinese website!