javascript - Prevent random particles to appear where unnecessary scrollbars are triggered -
how prevent random particles appear unnecessary scrollbars triggered? background element can't fixed-sized. think solution show particles on visible part of viewport , leave margin of few pixels, don't know how it.
// 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 = {}; (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) { (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);@-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; }<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>
you using wrong. dont directly use sparcle plugin on html tag instead add element starting of body tag , style it
<body> <div id="bg"></div> <div>sparkle, sparkle!</div> </body> where bg sparkle element pointing to.
and style bg element following
#bg { position:fixed; display:block; width:100%; height:100%; top:0; left:0; background: #1d1f20; overflow:hidden; z-index:-1; } here updated codepen link : https://codepen.io/anon/pen/lbelwa
Comments
Post a Comment