mirror of https://github.com/coddrago/Heroku
Update sakura.js
Who?
GitHub
parent
1d46cd5414
commit
850dfde53a
|
|
@ -1,133 +1,131 @@
|
||||||
// https://raw.githubusercontent.com/jhammann/sakura/master/src/sakura.js
|
// https://raw.githubusercontent.com/jhammann/sakura/master/src/sakura.js
|
||||||
const Sakura = function(t, e) {
|
const Sakura = function (t, e) {
|
||||||
if (void 0 === t) throw new Error("No selector present. Define an element.");
|
if (void 0 === t) throw new Error("No selector present. Define an element.");
|
||||||
this.el = document.querySelector(t);
|
this.el = document.querySelector(t);
|
||||||
var i, n;
|
var i, n;
|
||||||
|
function a(t) {
|
||||||
function a(t) {
|
return t[Math.floor(Math.random() * t.length)];
|
||||||
return t[Math.floor(Math.random() * t.length)];
|
}
|
||||||
}
|
function s(t, e) {
|
||||||
|
return Math.floor(Math.random() * (e - t + 1)) + t;
|
||||||
function s(t, e) {
|
}
|
||||||
return Math.floor(Math.random() * (e - t + 1)) + t;
|
(this.settings =
|
||||||
}
|
((i = {
|
||||||
(this.settings =
|
className: "sakura",
|
||||||
((i = {
|
fallSpeed: 1,
|
||||||
className: "sakura",
|
maxSize: 14,
|
||||||
fallSpeed: 1,
|
minSize: 10,
|
||||||
maxSize: 14,
|
delay: 300,
|
||||||
minSize: 10,
|
colors: [
|
||||||
delay: 300,
|
{
|
||||||
colors: [{
|
gradientColorStart: "rgba(255, 183, 197, 0.9)",
|
||||||
gradientColorStart: "rgba(255, 183, 197, 0.9)",
|
gradientColorEnd: "rgba(255, 197, 208, 0.9)",
|
||||||
gradientColorEnd: "rgba(255, 197, 208, 0.9)",
|
gradientColorDegree: 120,
|
||||||
gradientColorDegree: 120,
|
},
|
||||||
}, ],
|
],
|
||||||
}),
|
}),
|
||||||
(n = e),
|
(n = e),
|
||||||
Object.keys(i).forEach((t) => {
|
Object.keys(i).forEach((t) => {
|
||||||
n && Object.prototype.hasOwnProperty.call(n, t) && (i[t] = n[t]);
|
n && Object.prototype.hasOwnProperty.call(n, t) && (i[t] = n[t]);
|
||||||
}),
|
}),
|
||||||
i)),
|
i)),
|
||||||
(this.el.style.overflowX = "hidden");
|
(this.el.style.overflowX = "hidden");
|
||||||
const o = ["webkit", "moz", "MS", "o", ""];
|
const o = ["webkit", "moz", "MS", "o", ""];
|
||||||
|
function r(t, e, i) {
|
||||||
function r(t, e, i) {
|
for (let n = 0; n < o.length; n += 1) {
|
||||||
for (let n = 0; n < o.length; n += 1) {
|
let a = e;
|
||||||
let a = e;
|
o[n] || (a = e.toLowerCase()), t.addEventListener(o[n] + a, i, !1);
|
||||||
o[n] || (a = e.toLowerCase()), t.addEventListener(o[n] + a, i, !1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
function l(t) {
|
function l(t) {
|
||||||
const e = t.getBoundingClientRect();
|
const e = t.getBoundingClientRect();
|
||||||
return (
|
return (
|
||||||
e.top >= 0 &&
|
e.top >= 0 &&
|
||||||
e.left >= 0 &&
|
e.left >= 0 &&
|
||||||
e.bottom <=
|
e.bottom <=
|
||||||
(window.innerHeight || document.documentElement.clientHeight) &&
|
(window.innerHeight || document.documentElement.clientHeight) &&
|
||||||
e.right <= (window.innerWidth || document.documentElement.clientWidth)
|
e.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
(this.createPetal = () => {
|
(this.createPetal = () => {
|
||||||
this.el.dataset.sakuraAnimId &&
|
this.el.dataset.sakuraAnimId &&
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.requestAnimationFrame(this.createPetal);
|
window.requestAnimationFrame(this.createPetal);
|
||||||
}, this.settings.delay);
|
}, this.settings.delay);
|
||||||
const t = [
|
const t = [
|
||||||
"sway-0",
|
"sway-0",
|
||||||
"sway-1",
|
"sway-1",
|
||||||
"sway-2",
|
"sway-2",
|
||||||
"sway-3",
|
"sway-3",
|
||||||
"sway-4",
|
"sway-4",
|
||||||
"sway-5",
|
"sway-5",
|
||||||
"sway-6",
|
"sway-6",
|
||||||
"sway-7",
|
"sway-7",
|
||||||
"sway-8",
|
"sway-8",
|
||||||
],
|
],
|
||||||
e = a([
|
e = a([
|
||||||
"blow-soft-left",
|
"blow-soft-left",
|
||||||
"blow-medium-left",
|
"blow-medium-left",
|
||||||
"blow-soft-right",
|
"blow-soft-right",
|
||||||
"blow-medium-right",
|
"blow-medium-right",
|
||||||
]),
|
]),
|
||||||
i = a(t),
|
i = a(t),
|
||||||
n =
|
n =
|
||||||
(0.007 * document.documentElement.clientHeight +
|
(0.007 * document.documentElement.clientHeight +
|
||||||
Math.round(5 * Math.random())) *
|
Math.round(5 * Math.random())) *
|
||||||
this.settings.fallSpeed,
|
this.settings.fallSpeed,
|
||||||
o = [
|
o = [
|
||||||
`fall ${n}s linear 0s 1`,
|
`fall ${n}s linear 0s 1`,
|
||||||
`${e} ${(n > 30 ? n : 30) - 20 + s(0, 20)}s linear 0s infinite`,
|
`${e} ${(n > 30 ? n : 30) - 20 + s(0, 20)}s linear 0s infinite`,
|
||||||
`${i} ${s(2, 4)}s linear 0s infinite`,
|
`${i} ${s(2, 4)}s linear 0s infinite`,
|
||||||
].join(", "),
|
].join(", "),
|
||||||
d = document.createElement("div");
|
d = document.createElement("div");
|
||||||
d.classList.add(this.settings.className);
|
d.classList.add(this.settings.className);
|
||||||
const m = s(this.settings.minSize, this.settings.maxSize),
|
const m = s(this.settings.minSize, this.settings.maxSize),
|
||||||
h = m - Math.floor(s(0, this.settings.minSize) / 3),
|
h = m - Math.floor(s(0, this.settings.minSize) / 3),
|
||||||
c = a(this.settings.colors);
|
c = a(this.settings.colors);
|
||||||
(d.style.background = `linear-gradient(${c.gradientColorDegree}deg, ${c.gradientColorStart}, ${c.gradientColorEnd})`),
|
(d.style.background = `linear-gradient(${c.gradientColorDegree}deg, ${c.gradientColorStart}, ${c.gradientColorEnd})`),
|
||||||
(d.style.webkitAnimation = o),
|
(d.style.webkitAnimation = o),
|
||||||
(d.style.animation = o),
|
(d.style.animation = o),
|
||||||
(d.style.borderRadius = `${s(
|
(d.style.borderRadius = `${s(
|
||||||
this.settings.maxSize,
|
this.settings.maxSize,
|
||||||
this.settings.maxSize + Math.floor(10 * Math.random()),
|
this.settings.maxSize + Math.floor(10 * Math.random()),
|
||||||
)}px ${s(1, Math.floor(h / 4))}px`),
|
)}px ${s(1, Math.floor(h / 4))}px`),
|
||||||
(d.style.height = `${m}px`),
|
(d.style.height = `${m}px`),
|
||||||
(d.style.left = `${
|
(d.style.left = `${
|
||||||
Math.random() * document.documentElement.clientWidth - 100
|
Math.random() * document.documentElement.clientWidth - 100
|
||||||
}px`),
|
}px`),
|
||||||
(d.style.marginTop = `${-(Math.floor(20 * Math.random()) + 15)}px`),
|
(d.style.marginTop = `${-(Math.floor(20 * Math.random()) + 15)}px`),
|
||||||
(d.style.width = `${h}px`),
|
(d.style.width = `${h}px`),
|
||||||
r(d, "AnimationEnd", () => {
|
r(d, "AnimationEnd", () => {
|
||||||
l(d) || d.remove();
|
l(d) || d.remove();
|
||||||
}),
|
}),
|
||||||
r(d, "AnimationIteration", () => {
|
r(d, "AnimationIteration", () => {
|
||||||
l(d) || d.remove();
|
l(d) || d.remove();
|
||||||
}),
|
}),
|
||||||
this.el.appendChild(d);
|
this.el.appendChild(d);
|
||||||
}),
|
}),
|
||||||
this.el.setAttribute(
|
this.el.setAttribute(
|
||||||
"data-sakura-anim-id",
|
"data-sakura-anim-id",
|
||||||
window.requestAnimationFrame(this.createPetal),
|
window.requestAnimationFrame(this.createPetal),
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
(Sakura.prototype.start = function() {
|
(Sakura.prototype.start = function () {
|
||||||
if (this.el.dataset.sakuraAnimId)
|
if (this.el.dataset.sakuraAnimId)
|
||||||
throw new Error("Sakura is already running.");
|
throw new Error("Sakura is already running.");
|
||||||
this.el.setAttribute(
|
this.el.setAttribute(
|
||||||
"data-sakura-anim-id",
|
"data-sakura-anim-id",
|
||||||
window.requestAnimationFrame(this.createPetal),
|
window.requestAnimationFrame(this.createPetal),
|
||||||
);
|
);
|
||||||
}),
|
}),
|
||||||
(Sakura.prototype.stop = function(t = !1) {
|
(Sakura.prototype.stop = function (t = !1) {
|
||||||
const e = this.el.dataset.sakuraAnimId;
|
const e = this.el.dataset.sakuraAnimId;
|
||||||
e &&
|
e &&
|
||||||
(window.cancelAnimationFrame(e),
|
(window.cancelAnimationFrame(e),
|
||||||
this.el.setAttribute("data-sakura-anim-id", "")),
|
this.el.setAttribute("data-sakura-anim-id", "")),
|
||||||
t ||
|
t ||
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const t = document.getElementsByClassName(this.settings.className);
|
const t = document.getElementsByClassName(this.settings.className);
|
||||||
for (; t.length > 0;) t[0].parentNode.removeChild(t[0]);
|
for (; t.length > 0; ) t[0].parentNode.removeChild(t[0]);
|
||||||
}, this.settings.delay + 50);
|
}, this.settings.delay + 50);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue