Question

如何防止随机粒子出现在触发不必要的滚动条的位置？背景元素不能固定大小。我认为解决方案可能只是在视口的可见部分显示粒子并留下几个像素的边距，但我不知道该怎么做。

＆＃13;

// https://github.com/maxspeicher/jquery-sparkle

(function($, window, document) {

  const defaults = {
    fill: "#fff",
    stroke: "#000",
    size: 20,
    delay: 0,
    duration: 1500,
    pause: 1000
  };
  const optionsKeys = ["fill", "stroke", "size", "delay", "duration", "pause"];
  
  const optionsStrToObj = function(optionsStr) {
    const optionsArr = !!optionsStr ? optionsStr.split(" ") : [];
    var optionsObj = {};
    
    for (var i=0; i<optionsArr.length; ++i) {
      optionsObj[optionsKeys[i]] = optionsArr[i];
    }
    
    return optionsObj;
  };
  
  $.fn.sparkle = function(options) {
    $.destroySparkle = $.destroySparkle || {};
    
    const $this = this;
    const id = this.data("sparkle-id") || (new Date()).getTime() + Math.random();
    
    if (options === "destroy" && this.find("svg").length > 0) {
      $.destroySparkle[id] = true;
      this.data("sparkle-id", null);
    }
    
    var settings;

    if (options instanceof Array) {
      for (var i=0; i<options.length; ++i) {
        $this.sparkle(optionsStrToObj(options[i]));
      }
      
      return;
    } else if (options instanceof Object) {
      settings = $.extend({}, defaults, options);
    } else {
      settings = defaults;
    }
    
    const cssAnimationAttr = "my-sparkle " + settings.duration + "ms infinite linear";

    const $star = $('<svg class="my-sparkle" version="1.1" viewBox="0.0 0.0 50.0 50.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l50.0 0l0 50.0l-50.0 0l0 -50.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="' + settings.stroke + '" fill-opacity="0.0" d="m0 0l50.0 0l0 50.0l-50.0 0z" fill-rule="nonzero"></path><path fill="' + settings.fill + '" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-20.068499 4.323374l-4.309454 20.133318l-4.309454 -20.133318z" fill-rule="nonzero"></path><path stroke="' + settings.stroke + '" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-20.068499 4.323374l-4.309454 20.133318l-4.309454 -20.133318z" fill-rule="nonzero"></path></g></svg>').css({
        position: "absolute",
        width: settings.size,
        height: settings.size,
        zIndex: 9999
    });

    const w = this.width();
    const h = this.height();

    const getCoordinates = function() {
      return {
        left: Math.random() * w,
        top: Math.random() * h
      };
    };

    const placeStar = function(init) {
      const coords = getCoordinates();

      if (init) {
        $this.append($star);
      }

      $star.css({
        "-moz-animation": cssAnimationAttr,
        "-webkit-animation": cssAnimationAttr,
        animation: cssAnimationAttr,
        display: "block",
        left: coords.left,
        top: coords.top
      });

      window.setTimeout(function() {
        $star.css({
          "-moz-animation": null,
          "-webkit-animation": null,
          animation: null,
          display: "none"
        });
        
        if (!$.destroySparkle[id]) {
          window.setTimeout(function() {
            placeStar(false);
          }, settings.pause);
        } else {
          $star.remove();
        }
      }, settings.duration);
    };

    if (this.css("position") === "static") {
      this.css("position", "relative");
    }

    if (!$.destroySparkle[id] && options !== "destroy") {
      window.setTimeout(function() {
        placeStar(true);
      }, settings.delay);

      this.data("sparkle-id", id);
    }

    return this;
  };

$("#bg").sparkle({
  size: 25,
}).sparkle({
  delay: 1000,
  pause: 750,
  size: 25
}).sparkle({
  delay: 1500,
  pause: 750,
  size: 25
}).sparkle({
  delay: 2000,
  pause: 750,
  size: 25
}).sparkle({
  delay: 2500,
  pause: 750,
  size: 25
}).sparkle({
  delay: 3000,
  pause: 750,
  size: 25
});

})(Zepto, window, document);

＆＃13;

@-moz-keyframes my-sparkle {
  0%   {
    opacity: 0;
    -moz-transform: rotate(0deg) scale(0);
  }
  50%  {
    opacity: 1;
    -moz-transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: rotate(720deg) scale(0);
  }
}

@-webkit-keyframes my-sparkle {
  0%   {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0);
  }
  50%  {
    opacity: 1;
    -webkit-transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0);
  }
}

@keyframes my-sparkle {
  0%   {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  50%  {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0);
  }
}

body {
  background-color: #1d1f20;
  margin: 0;
  padding: 20px;
}

#bg {
  color: #666;
  display: inline-block;
  font-family: Verdana;
  font-size: 200%;
  font-weight: bold;
}

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

<html id="bg" style="width: 100%;
  height: 100%;">

<head>
<meta charset="UTF-8">
<title>Sparkles</title>
</head>

<body>
<div>Sparkle, sparkle!</div>
</body>

</html>

＆＃13;

https://codepen.io/tigre/pen/xRbZPZ

Answer 1

你错了。不要直接在html标签上使用sparcle插件，而是将元素添加到body标签的开头并设置样式

<body>
   <div id="bg"></div>
   <div>Sparkle, sparkle!</div>
</body>

其中bg是您指向的闪光元素。

和样式bg元素如下

#bg {
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background: #1d1f20;
  overflow:hidden;
  z-index:-1;
}

这是更新的Codepen链接：https://codepen.io/anon/pen/LbELWa

防止随机粒子出现在触发不必要的滚动条的位置

1 个答案: