圣诞节雪花效果，pc端 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/snow.css">
    <style type="text/css">
        .box{width: 100%; height: 900px; background: #000;}
    </style>
</head>
<body>
<div class="box"></div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/snow.js"></script>
</body>
</html>

snow.css

/*雪花飘落*/
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 2000;
}

.snow-container .snow {
    position: absolute;
    background: #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 {

}

snow.js

var isSupportCss3 = (function(){
    var ret = /MSIE (\d+\.\d+)/.exec(navigator.userAgent);
    if( !ret || ret[1] > 9 ){
        return true;
    }
    return false;
})();


(function () {

  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-11-26 13:55  Shimily  阅读(180)  评论(0)  编辑  收藏  举报