基于snowfall的玫瑰花瓣飘落效果

玫瑰花瓣飘落效果

做专题时，常常需要添加一些动效，可以让我们的页面活起来 
就像最近某电商网站一系列雪花飘落效果 
看了网上封装的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({
                                    width: 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>

 

posted @ 2016-01-21 10:27  橙子Alisa  阅读(1123)  评论(0)  编辑  收藏  举报