Author: | VincentGarreau |
---|---|
Views Total: | 32,123 views |
Official Page: | Go to website |
Last Update: | May 10, 2015 |
License: | MIT |
Preview:

Description:
Particles.js is a standalone JavaScript library helps you create an animated & interactive Particle System that reacts to viewer’s cursor. Based on Html5 canvas
element.
How to use it:
Create an empty container where you wish to generate a particle system.
<div id="particles-js"></div>
Load the Particles.js script at the end of the document so the page loads faster.
<script src="particles.js"></script>
Active the particle system and config particles.js’ params.
particlesJS('particles-js', { canvas: { color_hex_bg: '#15414e', opacity: 1 }, particles: { color_hex: '#fff', opacity: 1, size: 2.5, size_random: true, nb: 200, anim: { speed: 2 } }, retina_detect: true });
All the default params.
particles: { color: '#fff', shape: 'circle', opacity: 1, size: 2.5, size_random: true, nb: 200, line_linked: { enable_auto: true, distance: 100, color: '#fff', opacity: 1, width: 1, condensed_mode: { enable: true, rotateX: 65000, rotateY: 65000 } }, anim: { enable: true, speed: 1 }, array: [] }, interactivity: { enable: true, mouse: { distance: 100 }, detect_on: 'canvas', mode: 'grab' }, retina_detect: false, fn: { vendors:{ interactivity: {} } }
Changelog:
05/10/2015
- Update
how do I make this effect be a background (with text on top of it)?
https://stackoverflow.com/questions/40720838/particles-js-as-a-background
You can easily switch to tsParticles, an improved and updated version of the outdated and abandoned particles.js project. Just change the script and you’re done.
Check out https://github.com/matteobruni/tsparticles