PARTIKLE is a zero-dependency library for rendering floating particles
Maybe you didn't notice, but I've changed recently the way I render those floating particles on my website - I've built my own small library for it (and it's Open Source!! 🙌)
Usage is simple as its size (1.49kB! 😅) - just include its unpkg resource ( updated: <script src="https://unpkg.com/partikle"></script>
<script src="https://unpkg.com/partikle@latest/dist/index.iife.js"></script>
) and you're ready to go!
<script src="https://unpkg.com/partikle@latest/dist/index.iife.js"></script>
<div class="particle-canvas-wrapper" style="width: 100%; height: 100vh; position: relative; overflow: hidden;">
<div class="particle-canvas"></div>
</div>
<script>
partikle({
nodeId: 'particle-canvas',
particleColor: '#fefefe',
particlesAmount: 400
});
</script>
The only prerequisite is to add following styles for the wrapper node that will contain particles:
{
position: relative;
overflow: hidden;
}
You can check the source code here.
Enjoy!
-- Å‚.