fancy-webgl-sparkles
Version:
PIXI.js library to add glitter particles with bokeh and special effects to your DOM elements
117 lines (114 loc) • 2.59 kB
HTML
<html lang="en">
<head>
<title>Fancy WebGL Sparkles</title>
<script
data-name="BMC-Widget"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
data-id="NXhMDeu"
data-description="Support me on Buy me a coffee!"
data-message="Thank you for visiting. You can now buy me a coffee!"
data-color="#FF813F"
data-position="right"
data-x_margin="18"
data-y_margin="18"
></script>
<link rel="stylesheet" href="https://unpkg.com/docute@4.23.3/dist/docute.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body class="body">
<div id="docs"></div>
<script src="https://unpkg.com/docute@4.23.3/dist/docute.js" ></script>
<script src="./js/fancy-webgl-sparkles.js"></script>
</body>
<script>
new Docute({
target: "#docs",
logo: "<span class='logo'>fancy-webgl-sparkles.js</span>",
darkThemeToggler: true,
nav: [
{
title: "Home",
link: "/",
},
{
title: "Get Started",
link: "/getting-started/introduction",
},
{
title: "Examples",
link: "/usage/examples",
},
{
title: "GitHub",
link: "https://github.com/elisamuelps/fancy-webgl-sparkles",
},
{
title: "Buy Me A Coffee",
link: "https://www.buymeacoffee.com/NXhMDeu",
}
],
sidebar:
[
{
title: "Getting Started",
children:
[
{
title: "Introduction",
link: "/getting-started/introduction",
},
{
title: "FAQ",
link: "/getting-started/faq",
},
],
},
{
title: "Usage",
children:
[
{
title: "Example Usage",
link: "/usage/examples",
},
{
title: "Options",
link: "/usage/options",
},
{
title: "Methods",
link: "/usage/methods",
},
],
},
{
title: "Credits",
link: "/credits",
},
{
title: "GitHub",
link: "https://github.com/elisamuelps/fancy-webgl-sparkles",
},
],
});
FancyWebGLSparkles.init(document.querySelector(".Header"),
{
persistent: true,
renderOutside: false,
sparkleScale: 250,
renderBokeh: true,
bokehSize: 0.4,
sparkleColor: "rainbow"
});
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:700|Sunshiney&display=swap');
.logo
{
font-family: 'Sunshiney', cursive;
font-size: 2rem;
}
</style>
</html>