Examples of snow animation effects implemented by jQuery [Download source code] And jquery source code download
This article describes the snow animation effect implemented by jQuery. We will share this with you for your reference. The details are as follows:
Html section:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Jquery. snow. js:
/*** Jquery. snow-jQuery Snow Effect Plugin ** Available under MIT licence ** @ version 1 (21. jan 2012) * @ author Ivan Lazarevic * @ requires jQuery * @ see http://workshop.rs ** @ params minSize-min size of snowflake, 10 by default * @ params maxSize-max size of snowflake, 20 by default * @ params newOn-frequency in MS of appearing of new snowflake, 500 by default * @ params flakeColor-color of snowflake, # FFFFFF by default * @ example $. fn. snow ({maxSize: 200, newOn: 1000}); */(function ($) {$. fn. snow = function (options) {var $ flake = $ ('<div id = "flake"/> 'salary .css ({'position': 'absolute', 'top ': '-50px'{}.html ('❄'), Encryption entheight = $ (document ). height (), documentWidth = $ (document ). width (), defaults = {minSize: 10, maxSize: 20, newOn: 500, flakeColor: "# FFFFFF"}, options = $. extend ({}, defaults, options); // The setInterval-setInterval () method can call a function or compute expression according to the specified period (in milliseconds. // Start a period-start adding snowflake var interval = setInterval (function () {var startPositionLeft = Math. random () * documentWidth-100, startOpacity = 0.5 + Math. random (), sizeFlake = options. minSize + Math. random () * options. maxSize, endPositionTop = incluentheight-40, endPositionLeft = startPositionLeft-100 + Math. random () * 200, durationFall = random entheight * 10 + Math. random () * 5000; $ flake. clone (). appendTo ('body '). css ({left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options. flakeColor }). animate (// Add snowflake dynamic effects {top: endPositionTop, left: endPositionLeft, opacity: 0.2}, durationFall, 'linear ', function () {$ (this ). remove ()}) ;}, options. newOn); // end cycle-Stop adding snowflake setTimeout (function () {window. clearInterval (interval) ;}, 5000) ;}} (jQuery );
No css style required
Mainly used:setInterval-setInterval()
A function or computing expression can be called according to the specified period (in milliseconds. & Animation
Running effect:
Appendix:Click here for the complete instance codeDownload from this site.