zoukankan      html  css  js  c++  java
  • 基于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({
                                         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>
    生活需要正能量,不忘初心,方的始终
  • 相关阅读:
    changing a pointer rather than erasing memory cells
    验证码识别 edge enhancement 轮廓增强 region finding 区域查找
    Manipulating Data Structures
    passing parameters by value is inefficient when the parameters represent large blocks of data
    Aliasing 走样
    Artificial Intelligence Research Methodologies 人工智能研究方法
    Thread safety
    include pointers as a primitive data type
    flat file
    functional cohesion
  • 原文地址:https://www.cnblogs.com/alisalixue/p/5147430.html
Copyright © 2011-2022 走看看