官网圣诞节雪花飘落，pc端

下载地址：https://files.cnblogs.com/files/shimily/snow-mcake-Pc%E7%AB%AF.zip

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        body{background:url(images/22.jpg);}
       .main{width: 1200px; margin: 0 auto;}

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            z-index: 2000;
        }

        .snow-container .snow {
            position: absolute;
            background-color: #fff;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            background: url(../images/snow.png) no-repeat\9;
        }

        :root .snow-container .snow {

        }
        </style>
        
    </head>

    <body>

        <div class="main">
            
        </div>
        <canvas width="1920" height="903" style="position: fixed; top: 0px; left: 0px; pointer-events: none; z-index: 1001;"></canvas>
        <script src="js/jquery.min.js"></script>
         <script src="js/snow.js"></script>

    </body>
</html>

 

(function () {
var isSupportCss3 = (function(){
    var ret = /MSIE (\d+\.\d+)/.exec(navigator.userAgent);
    if( !ret || ret[1] > 9 ){
      return true;
    }
    return false;
  })();
  Function.prototype.bind = Function.prototype.bind || function(){
      var self = this,
        context = [].shift.call(arguments),
        args = [].slice.call(arguments);
      return function(){
        return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
      }
    };

  function getRandom(min, max) {
    return min + Math.random()*(max-min);
  }

  function getWindowSize() {
    return {
      clientW: window.innerWidth || document.documentElement.clientWidth,
      clientH: window.innerHeight || document.documentElement.clientHeight
    }
  }

  var clientSize = getWindowSize();
  var body = document.body;

  function Snow(container, opts) {
    this.container = container;
    this.opts = opts;
    this.create();
  }

  Snow.prototype = {
    create: function () {
      this.el = document.createElement("div");
      this.el.className = 'snow';
      this.el.style["width"] = this.opts.snowWidth + "px";
      this.el.style["height"] = this.opts.snowHeight + "px";
      this.el.style["top"] = -this.opts.snowHeight + "px";
      this.el.style["-webkit-transition"] = "all " + this.opts.speed + "ms linear";
      this.el.style["transition"] = "all " + this.opts.speed + "ms linear";

      this.container.appendChild(this.el);
      this.fall();
    },
    fall: function () {
      var self = this;
      var left = getRandom(0, clientSize.clientW - this.opts.snowWidth);
      var destLeft = getRandom(-300, 300);
      var scale = getRandom(0.6, 1);

      this.el.style["left"] = left + "px";
      this.el.style["-ms-transform"] = "scale("+ scale +")";
      this.el.style["-webkit-transform"] = "scale("+ scale +")";
      this.el.style["transform"] = "scale("+ scale +")";

      body.offsetWidth;
      var transformStyle = "scale("+ scale +") translate3d("+ destLeft +"px,"+ (clientSize.clientH + this.opts.snowHeight)*2 +"px,0px)";
      this.el.style["-webkit-transform"] = transformStyle;
      this.el.style["transform"] = transformStyle;

      //当前页面失去焦点时，通过transitionend的方式移除this.el会有问题，因此通过这种方式移除
      $({y: -this.opts.snowHeight, left: left}).animate({
        y: (clientSize.clientH + this.opts.snowHeight)*(1/scale),
        left: left + destLeft
      }, {
        easing: 'linear',
        duration: this.opts.speed,
        step: function ( value, obj) {
          if( !isSupportCss3 ){
            if( obj.prop == 'y' ) {
              self.el.style.top = obj.now + "px";
            }
            if( obj.prop == 'left' ){
              self.el.style.left = obj.now + "px";
            }
          }
        },
        complete: function () {
          self.reset();
        }
      });
    },
    reset: function () {
      try {
        this.container.removeChild(this.el);
      } catch (e){
        console.error(e.message);
      }
    }
  };

  function SnowFall(opts){
    this.opts = $.extend({
      interval: 200,
      speed: 15000,
      snowWidth: 8,
      snowHeight: 8
    }, opts||{});

    this.timer = null;
    this.body = document.body;

    this.init();
  }

  SnowFall.prototype = {
    init: function () {
      this.createLayout();
      this.start();
    },
    start: function () {
      new Snow(this.container, this.opts);
      this.timer = setTimeout(function () {
        this.start();
      }.bind(this), this.opts.interval);
    },
    createLayout:function () {
      this.container = document.createElement("div");
      this.container.className = 'snow-container';
      this.body.appendChild(this.container);
    },
    destroy: function () {
      if( this.timer ) clearTimeout(this.timer);
      this.container.parentNode.removeChild(this.container);
    }
  };

  $(function () {
    $(window).on("resize", function () {
      clientSize = getWindowSize();
    });
  });

  new SnowFall();
  
})();

 

 

posted @ 2019-12-20 11:51  Shimily  阅读(148)  评论(0)    收藏  举报