玫瑰花瓣飘落效果
做专题时，常常需要添加一些动效，可以让我们的页面活起来
就像最近某电商网站一系列雪花飘落效果
看了网上封装的snowfall.js配置挺方便的，用起来也蛮好的
用法
1.首先引入jquery
2.再引入snowfall.js
3.开启雪花特效
$(document).snowfall();
4.配置参数
$(document).snowfall({flakeCount : 100, maxSpeed : 10});
常用的可配置参数：
image:"",//图片链接
flakeCount : 20,//数量
flakeColor : '#ffffff',颜色
minSize : 1,最小size
maxSize : 2,最大size
minSpeed : 1,最小速度
maxSpeed : 5,最大速度
round : false,是否圆润
shadow : false,是否阴影
清除雪花
$(‘#element’).snowfall(‘clear’);
如果要飘落几种不同的图片
可以多开启几种雪花特效：
$(document).snowfall({
image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f3.png",
minSize: 28,
maxSize: 70
});
$(document).snowfall({
image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f4.png",
minSize: 28,
maxSize: 50
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="telephone=no" name="format-detection" /> <title>title</title> <link rel="stylesheet" type="text/css" href="http://q.qunarzz.com/resetcss/prd/1.0.2/reset.css"> </head> <body> <script src='http://q.qunarzz.com/jquery/prd/jquery-1.7.2.js'></script> <script> if (!Date.now) Date.now = function() { return new Date().getTime(); }; (function() { 'use strict'; var vendors = ['webkit', 'moz']; for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { var vp = vendors[i]; window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] || window[vp+'CancelRequestAnimationFrame']); } if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy || !window.requestAnimationFrame || !window.cancelAnimationFrame) { var lastTime = 0; window.requestAnimationFrame = function(callback) { var now = Date.now(); var nextTime = Math.max(lastTime + 16, now); return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now); }; window.cancelAnimationFrame = clearTimeout; } }()); (function($){ $.snowfall = function(element, options){ var flakes = [], defaults = { flakeCount : 20, flakeColor : '#ffffff', flakePosition: 'absolute', flakeIndex: 999999, minSize : 1, maxSize : 2, minSpeed : 1, maxSpeed : 5, round : false, shadow : false, collection : false, collectionHeight : 40, deviceorientation : false }, options = $.extend(defaults, options), random = function random(min, max){ return Math.round(min + Math.random()*(max-min)); }; $(element).data("snowfall", this); // Snow flake object function Flake(_x, _y, _size, _speed){ // Flake properties this.x = _x; this.y = _y; this.size = _size; this.speed = _speed; this.step = 0; this.stepSize = random(1,10) / 100; if(options.collection){ this.target = canvasCollection[random(0,canvasCollection.length-1)]; } var flakeMarkup = null; if(options.image){ flakeMarkup = document.createElement("img"); flakeMarkup.src = options.image; }else{ flakeMarkup = document.createElement("div"); $(flakeMarkup).css({'background' : options.flakeColor}); } $(flakeMarkup).attr({ 'class': 'snowfall-flakes', }).css({ 'width' : this.size, 'height' : this.size, 'position' : options.flakePosition, 'top' : this.y, 'left' : this.x, 'fontSize' : 0, 'zIndex' : options.flakeIndex }); if($(element).get(0).tagName === $(document).get(0).tagName){ $('body').append($(flakeMarkup)); element = $('body'); }else{ $(element).append($(flakeMarkup)); } this.element = flakeMarkup; // Update function, used to update the snow flakes, and checks current snowflake against bounds this.update = function(){ this.y += this.speed; if(this.y > (elHeight) - (this.size + 6)){ this.reset(); } this.element.style.top = this.y + 'px'; this.element.style.left = this.x + 'px'; this.step += this.stepSize; if (doRatio === false) { this.x += Math.cos(this.step); } else { this.x += (doRatio + Math.cos(this.step)); } // Pileup check if(options.collection){ if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){ var ctx = this.target.element.getContext("2d"), curX = this.x - this.target.x, curY = this.y - this.target.y, colData = this.target.colData; if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){ if(curY+this.speed+this.size > this.target.height){ while(curY+this.speed+this.size > this.target.height && this.speed > 0){ this.speed *= .5; } ctx.fillStyle = "#fff"; if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){ colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1; ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size); }else{ colData[parseInt(curX)][parseInt(curY+this.speed)] = 1; ctx.fillRect(curX, curY+this.speed, this.size, this.size); } this.reset(); }else{ // flow to the sides this.speed = 1; this.stepSize = 0; if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){ // go left this.x++; }else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){ // go right this.x--; }else{ //stop ctx.fillStyle = "#fff"; ctx.fillRect(curX, curY, this.size, this.size); colData[parseInt(curX)][parseInt(curY)] = 1; this.reset(); } } } } } if(this.x + this.size > (elWidth) - widthOffset || this.x < widthOffset){ this.reset(); } } // Resets the snowflake once it reaches one of the bounds set this.reset = function(){ this.y = 0; this.x = random(widthOffset, elWidth - widthOffset); this.stepSize = random(1,10) / 100; this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100; this.element.style.width = this.size + 'px'; this.element.style.height = this.size + 'px'; this.speed = random(options.minSpeed, options.maxSpeed); } } // local vars var i = 0, elHeight = $(element).height(), elWidth = $(element).width(), widthOffset = 0, snowTimeout = 0; // Collection Piece ****************************** if(options.collection !== false){ var testElem = document.createElement('canvas'); if(!!(testElem.getContext && testElem.getContext('2d'))){ var canvasCollection = [], elements = $(options.collection), collectionHeight = options.collectionHeight; for(var i =0; i < elements.length; i++){ var bounds = elements[i].getBoundingClientRect(), $canvas = $('<canvas/>', { 'class' : 'snowfall-canvas' }), collisionData = []; if(bounds.top-collectionHeight > 0){ $('body').append($canvas); $canvas.css({ 'position' : options.flakePosition, 'left' : bounds.left + 'px', 'top' : bounds.top-collectionHeight + 'px' }) .prop({ bounds.width, height: collectionHeight }); for(var w = 0; w < bounds.width; w++){ collisionData[w] = []; } canvasCollection.push({ element : $canvas.get(0), x : bounds.left, y : bounds.top-collectionHeight, width : bounds.width, height: collectionHeight, colData : collisionData }); } } }else{ // Canvas element isnt supported options.collection = false; } } // ************************************************ // This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page if($(element).get(0).tagName === $(document).get(0).tagName){ widthOffset = 25; } // Bind the window resize event so we can get the innerHeight again $(window).bind("resize", function(){ elHeight = $(element)[0].clientHeight; elWidth = $(element)[0].offsetWidth; }); // initialize the flakes for(i = 0; i < options.flakeCount; i+=1){ flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed))); } // This adds the style to make the snowflakes round via border radius property if(options.round){ $('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize}); } // This adds shadows just below the snowflake so they pop a bit on lighter colored web pages if(options.shadow){ $('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'}); } // On newer Macbooks Snowflakes will fall based on deviceorientation var doRatio = false; if (options.deviceorientation) { $(window).bind('deviceorientation', function(event) { doRatio = event.originalEvent.gamma * 0.1; }); } // this controls flow of the updating snow function snow(){ for( i = 0; i < flakes.length; i += 1){ flakes[i].update(); } snowTimeout = requestAnimationFrame(function(){snow()}); } snow(); // clears the snowflakes this.clear = function(){ $('.snowfall-canvas').remove(); $(element).children('.snowfall-flakes').remove(); cancelAnimationFrame(snowTimeout); } }; // Initialize the options and the plugin $.fn.snowfall = function(options){ if(typeof(options) == "object" || options == undefined){ return this.each(function(i){ (new $.snowfall(this, options)); }); }else if (typeof(options) == "string") { return this.each(function(i){ var snow = $(this).data('snowfall'); if(snow){ snow.clear(); } }); } }; })(jQuery); function flowerfall(){ $(document).snowfall('clear'); $(document).snowfall({ image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f1.png", minSize: 28, maxSize: 90 }); $(document).snowfall({ image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f2.png", minSize: 28, maxSize: 50 }); $(document).snowfall({ image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f3.png", minSize: 28, maxSize: 70 }); $(document).snowfall({ image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f4.png", minSize: 28, maxSize: 50 }); $(document).snowfall({ image: "http://source.qunar.com/mobile_platform/mobile_douxing/qtuan/topic/pctopic/20150907-bzwq/f5.png", minSize: 28, maxSize: 90 }); } flowerfall(); </script> </body> </html>