Tigre Tigre - 28 days ago 13
CSS Question

Prevent random particles to appear where unnecessary scrollbars are triggered

How to prevent random particles to appear where unnecessary scrollbars are triggered?
The background element can't be fixed-sized.
I think the solution could be to only show particles on the visible part of the viewport and to leave a margin of a few pixels, but I don't know how to do 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 = {};

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);

@-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>





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

MJN MJN
Answer

You are using it wrong. Dont directly use sparcle plugin on html tag instead add element to starting of body tag and style it

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

where bg is your sparkle element you are pointing to.

and Style bg element as following

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

Here is updated Codepen link : https://codepen.io/anon/pen/LbELWa

Comments