Home > Article > Web Front-end > 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!