jquery Web page Snow effect plug-in instance

And to the end of the year, from the beginning of Christmas, you can find that the activities of the major sites are more and more, have become a snow-wrapped, I need to do so because of business needs to do so an effect, so it is through the Google great God to find the relevant resources, the results of the N A wide variety, and finally found this article to see this effect, the original author can say that has met my needs, but in order to meet more scenes, and then the original author of the adjustment on the basis of.

Statement: The core code of this article belongs to the original author @ivan Lazarevic (https://github.com/kopipejst), I only added some parameters and effects

Compatibility: In addition to IE, the mainstream browser (and of course, you can adjust the code to support IE version of the browser, the example does not support IE)

The adjusted code is as follows:
(The upper part is jquery-easing, the lower part is snowflake effect)

The code is as follows

Copy Code

(function ($) { /* * JQuery easing v1.3-http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added in JQuery 1.1 * To offer multiple easing options * * TERMS of Use-jquery easing * * Open Source under the BSD License. * * copyright©2008 George McGinley Smith * All rights reserved. * * Redistribution and use in the source and binary forms, with or without modification, * are permitted provided that following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * Conditions and the following disclaimer. * redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * Provided with the distribution. * * Neither the name of the author nor the names of contributors May is used to endorse * or promote products derived the From this software without specific prior written. * * This SOFTWARE was provided by the COPYRIGHT holders and CONTRIBUTORS "as is" and any * EXPRESS OR implied warranties, including, BUT not LIMITED to, the implied warranties of * merchantability and FITNESS for A particular purpose ARE disclaimed. In NO EVENT SHALL the * COPYRIGHT OWNER OR CONTRIBUTORS be liable to any DIRECT, INDIRECT, incidental, SPECIAL, * Exemplary, or consequential damages (including, BUT not LIMITED to, procurement of substitute * Goods or SERVICES; LOSS of Use, DATA, OR profits; OR BUSINESS interruption) HOWEVER caused * And on any theory of the liability, WHETHER in CONTRACT, STRICT liability, OR TORT (including * Negligence OR otherwise) arising in no WAY out of the "use of" this SOFTWARE, even IF advised * of the possibility of SUCH DAMAGE. * */ T:current time, b:beginning value, C:change in value, d:duration jquery.easing[' jswing '] = jquery.easing[' swing ']; Jquery.extend (Jquery.easing, { def: ' Easeoutquad ', Swing:function (x, T, B, C, D) { alert (JQuery.easing.default); return Jquery.easing[jquery.easing.def] (x, T, B, C, D); }, Easeinquad:function (x, T, B, C, D) { Return c* (T/=d) *t + b; }, Easeoutquad:function (x, T, B, C, D) { Return-c * (t/=d) * (t-2) + B; }, Easeinoutquad:function (x, T, B, C, D) { if ((T/=D/2) < 1) return c/2*t*t + B; RETURN-C/2 * ((--T) * (t-2)-1) + B; }, Easeincubic:function (x, T, B, C, D) { Return c* (T/=d) *t*t + b; }, Easeoutcubic:function (x, T, B, C, D) { Return c* ((t=t/d-1) *t*t + 1) + B; }, Easeinoutcubic:function (x, T, B, C, D) { if ((T/=D/2) < 1) return c/2*t*t*t + B; Return c/2* ((t-=2) *t*t + 2) + B; }, Easeinquart:function (x, T, B, C, D) { Return c* (T/=d) *t*t*t + b; }, Easeoutquart:function (x, T, B, C, D) { Return-c * ((t=t/d-1) *t*t*t-1) + B; }, Easeinoutquart:function (x, T, B, C, D) { if ((T/=D/2) < 1) return c/2*t*t*t*t + B; RETURN-C/2 * ((t-=2) *t*t*t-2) + B; }, Easeinquint:function (x, T, B, C, D) { Return c* (T/=d) *t*t*t*t + b; }, Easeoutquint:function (x, T, B, C, D) { Return c* ((t=t/d-1) *t*t*t*t + 1) + B; }, Easeinoutquint:function (x, T, B, C, D) { if ((T/=D/2) < 1) return c/2*t*t*t*t*t + B; Return c/2* ((t-=2) *t*t*t*t + 2) + B; }, Easeinsine:function (x, T, B, C, D) { Return-c * Math.Cos (T/D * (MATH.PI/2)) + C + B; }, Easeoutsine:function (x, T, B, C, D) { Return c * Math.sin (T/D * (MATH.PI/2)) + B; }, Easeinoutsine:function (x, T, B, C, D) { RETURN-C/2 * (Math.Cos (MATH.PI*T/D)-1) + B; }, Easeinexpo:function (x, T, B, C, D) { Return (t==0)? B:C * MATH.POW (2, * (T/D-1)) + B; }, Easeoutexpo:function (x, T, B, C, D) { Return (T==d)? B+C:C * (-math.pow (2, -10 * t/d) + 1) + B; }, Easeinoutexpo:function (x, T, B, C, D) { if (t==0) return B; if (T==d) return b+c; if ((T/=D/2) < 1) return C/2 * MATH.POW (2, * (t-1)) + B; Return C/2 * (-math.pow (2, -10 *--t) + 2) + B; }, Easeincirc:function (x, T, B, C, D) { Return-c * (MATH.SQRT (1-(T/=d) *t)-1) + B; }, Easeoutcirc:function (x, T, B, C, D) { Return c * MATH.SQRT (1-(t=t/d-1) *t) + B; }, Easeinoutcirc:function (x, T, B, C, D) { if ((T/=D/2) < 1) RETURN-C/2 * (MATH.SQRT (1-t*t)-1) + B; Return C/2 * (MATH.SQRT (1-(t-=2) *t) + 1) + B; }, Easeinelastic:function (x, T, B, C, D) { var s=1.70158;var p=0;var A=c; if (t==0) return B;  if ((T/=d) ==1) return b+c; if (!p) p=d*.3; if (A < Math.Abs (c)) {a=c; var S=p/4;} else var s = p/(2*math.pi) * Math.asin (C/A); Return-(A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p)) + B; }, Easeoutelastic:function (x, T, B, C, D) { var s=1.70158;var p=0;var A=c; if (t==0) return B;  if ((T/=d) ==1) return b+c; if (!p) p=d*.3; if (A < Math.Abs (c)) {a=c; var S=p/4;} else var s = p/(2*math.pi) * Math.asin (C/A); Return A*math.pow (2,-10*t) * Math.sin ((t*d-s) * (2*MATH.PI)/p) + C + B; }, Easeinoutelastic:function (x, T, B, C, D) { var s=1.70158;var p=0;var A=c; if (t==0) return B;  if ((T/=D/2) ==2) return b+c; if (!p) p=d* (. 3*1.5); if (A < Math.Abs (c)) {a=c; var S=p/4;} else var s = p/(2*math.pi) * Math.asin (C/A); if (T < 1) return-.5* (A*math.pow (2,10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p)) + B; Return A*math.pow (2,-10* (t-=1)) * Math.sin ((t*d-s) * (2*MATH.PI)/p) *.5 + C + B; }, Easeinback:function (x, T, B, C, D, s) { if (s = = undefined) s = 1.70158; Return c* (T/=d) *t* ((s+1) *t-s) + B; }, Easeoutback:function (x, T, B, C, D, s) { if (s = = undefined) s = 1.70158; Return c* ((t=t/d-1) *t* ((s+1) *t + s) + 1) + B; }, Easeinoutback:function (x, T, B, C, D, s) { if (s = = undefined) s = 1.70158; if ((T/=D/2) < 1) return c/2* (t*t* ((s*= (1.525)) +1)) + B; Return c/2* ((t-=2) *t* (((s*= (1.525)) +1) *t + s) + 2) + B; }, Easeinbounce:function (x, T, B, C, D) { return c-jquery.easing.easeoutbounce (x, d-t, 0, C, D) + B; }, Easeoutbounce:function (x, T, B, C, D) { if ((T/=d) < (1/2.75)) { Return c* (7.5625*t*t) + B; else if (T < (2/2.75)) { Return c* (7.5625* (t-= (1.5/2.75)) *t +.) + B; else if (T < (2.5/2.75)) { Return c* (7.5625* (t-= (2.25/2.75)) *t +. 9375) + b; } else { Return c* (7.5625* (t-= (2.625/2.75)) *t +. 984375) + b; } }, Easeinoutbounce:function (x, T, B, C, D) { if (T < D/2) return jQuery.easing.easeInBounce (x, t*2, 0, C, D) *. 5 + b; return jQuery.easing.easeOutBounce (x, t*2-d, 0, C, D) *. 5 + c*.5 + B; } }); /* * * TERMS of Use-easing equations * * Open Source under the BSD License. * * copyright©2001 Robert Penner * All rights reserved. * * Redistribution and use in the source and binary forms, with or without modification, * are permitted provided that following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * Conditions and the following disclaimer. * redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * Provided with the distribution. * * Neither the name of the author nor the names of contributors May is used to endorse * or promote products derived the From this software without specific prior written. * * This SOFTWARE was provided by the COPYRIGHT holders and CONTRIBUTORS "as is" and any * EXPRESS OR implied warranties, including, BUT not LIMITED to, the implied warranties of * merchantability and FITNESS for A particular purpose ARE disclaimed. In NO EVENT SHALL the * COPYRIGHT OWNER OR CONTRIBUTORS be liable to any DIRECT, INDIRECT, incidental, SPECIAL, * Exemplary, or consequential damages (including, BUT not LIMITED to, procurement of substitute * Goods or SERVICES; LOSS of Use, DATA, OR profits; OR BUSINESS interruption) HOWEVER caused * And on any theory of the liability, WHETHER in CONTRACT, STRICT liability, OR TORT (including * Negligence OR otherwise) arising in no WAY out of the "use of" this SOFTWARE, even IF advised * of the possibility of SUCH DAMAGE. * */ $.fn.snow = function (options) { Working with browsers var na = Window.navigator; var ua = Na.userAgent.toLowerCase (); var browsertester =/(Webkit|gecko|presto|opera|safari|firefox|chrome|applewebkit) [/os]* ([D_.] +)/ig if (!browsertester.test (UA)) { Return } var winheight = $ (window). Height (); var docheight = $ (document). Height (); var docwidth = $ (document). width (); var defaults = { MINSIZE:20,//snowflake minimum size MAXSIZE:50,//snowflake maximum size Speed:docheight * 10,//Snow drop speed FREQUENCY:500,//frequency of snowflakes appearing Color: "#FFFFFF",//Snowflake color Easing: ' linear ',//Snowflake animation effect Position: ' absolute '//positioning mode }; var options = $.extend ({}, defaults, options); var $snow = $ (' <div> '). css ({' position ': options.position, ' top ': ' -50px ', ' Z-index ': 9999999999}). html (' ❄ '); var height = Options.position = = "fixed"? Winheight:docheight; var width = docwidth; $ (' body '). CSS (' overflow-x ', ' hidden '); var interval = setinterval (function () { var startpositionleft = math.random () * WIDTH-100; var startopacity = 0.5 + math.random (); var size = options.minsize + math.random () * options.maxsize; var endpositiontop = height-40; var endpositionleft = Startpositionleft + (math.random () *10 > 5? -500:500); $snow. Clone (). Appendto (' body '). CSS ({ Left:startpositionleft, Opacity:startopacity, ' Font-size ': size, Color:options.color }). Animate ({ Top:endpositiontop, Left:endpositionleft, opacity:0.2 },options.speed, Options.easing,function () { $ (this). Remove () } ); }, Options.frequency); }; }) (JQuery);

The adjustment points are:

Increases the speed parameter, refers to the life cycle length of each snowflake
Increase the frequency parameter, refers to the interval between each snowflake length
Add easing parameters, support all animations of jquery-easing Plug-ins, define animation for each snowflake
Add position parameter to support snowflake falling with screen