particles.js alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view particles.js alternatives based on common mentions on social networks and blogs.
-
animate.css
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing. -
GreenSock-JS
GreenSock's GSAP JavaScript animation library (including Draggable). -
barbajs
Create badass, fluid and smooth transitions between your website’s pages. -
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
jquery.transit
Super-smooth CSS3 transformations and transitions for jQuery -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
shuffle-images
The Simplest Way to shuffle through images in a Creative Way -
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
Tailwind Animations
Cool animations implemented with tailwindcss -
js-loading-overlay
Display loading overlay/spinner for your application easily and beautifully. -
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
Amplication: open-source Node.js backend code generator
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of particles.js or a related project?
README
particles.js
A lightweight JavaScript library for creating particles.
Demo / Generator
Configure, export, and share your particles.js configuration on CodePen: http://vincentgarreau.com/particles.js/
CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso
Usage
Load particles.js and configure the particles:
index.html
<div id="particles-js"></div>
<script src="particles.js"></script>
app.js
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
particles.json
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 80,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 300,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 12,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 800,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 800,
"size": 80,
"duration": 2,
"opacity": 0.8,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
Options
key | option type / notes | example |
---|---|---|
particles.number.value |
number | 40 |
particles.number.density.enable |
boolean | true / false |
particles.number.density.value_area |
number | 800 |
particles.color.value |
HEX (string) RGB (object) HSL (object) array selection (HEX) random (string) | "#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random" |
particles.shape.type |
string array selection | "circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"] |
particles.shape.stroke.width |
number | 2 |
particles.shape.stroke.color |
HEX (string) | "#222222" |
particles.shape.polygon.nb_slides |
number | 5 |
particles.shape.image.src |
path link svg / png / gif / jpg | "assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png" |
particles.shape.image.width |
number (for aspect ratio) | 100 |
particles.shape.image.height |
number (for aspect ratio) | 100 |
particles.opacity.value |
number (0 to 1) | 0.75 |
particles.opacity.random |
boolean | true / false |
particles.opacity.anim.enable |
boolean | true / false |
particles.opacity.anim.speed |
number | 3 |
particles.opacity.anim.opacity_min |
number (0 to 1) | 0.25 |
particles.opacity.anim.sync |
boolean | true / false |
particles.size.value |
number | 20 |
particles.size.random |
boolean | true / false |
particles.size.anim.enable |
boolean | true / false |
particles.size.anim.speed |
number | 3 |
particles.size.anim.size_min |
number | 0.25 |
particles.size.anim.sync |
boolean | true / false |
particles.line_linked.enable |
boolean | true / false |
particles.line_linked.distance |
number | 150 |
particles.line_linked.color |
HEX (string) | #ffffff |
particles.line_linked.opacity |
number (0 to 1) | 0.5 |
particles.line_linked.width |
number | 1.5 |
particles.move.enable |
boolean | true / false |
particles.move.speed |
number | 4 |
particles.move.direction |
string | "none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" |
particles.move.random |
boolean | true / false |
particles.move.straight |
boolean | true / false |
particles.move.out_mode |
string (out of canvas) | "out" "bounce" |
particles.move.bounce |
boolean (between particles) | true / false |
particles.move.attract.enable |
boolean | true / false |
particles.move.attract.rotateX |
number | 3000 |
particles.move.attract.rotateY |
number | 1500 |
interactivity.detect_on |
string | "canvas", "window" |
interactivity.events.onhover.enable |
boolean | true / false |
interactivity.events.onhover.mode |
string array selection | "grab" "bubble" "repulse" ["grab", "bubble"] |
interactivity.events.onclick.enable |
boolean | true / false |
interactivity.events.onclick.mode |
string array selection | "push" "remove" "bubble" "repulse" ["push", "repulse"] |
interactivity.events.resize |
boolean | true / false |
interactivity.events.modes.grab.distance |
number | 100 |
interactivity.events.modes.grab.line_linked.opacity |
number (0 to 1) | 0.75 |
interactivity.events.modes.bubble.distance |
number | 100 |
interactivity.events.modes.bubble.size |
number | 40 |
interactivity.events.modes.bubble.duration |
number (second) | 0.4 |
interactivity.events.modes.repulse.distance |
number | 200 |
interactivity.events.modes.repulse.duration |
number (second) | 1.2 |
interactivity.events.modes.push.particles_nb |
number | 4 |
interactivity.events.modes.push.particles_nb |
number | 4 |
retina_detect |
boolean | true / false |
Packages install
npm
https://www.npmjs.com/package/particles.js
npm install particles.js
Bower
bower install particles.js --save
Rails Assets
gem 'rails-assets-particles.js'
Meteor
https://atmospherejs.com/newswim/particles
meteor add newswim:particles
Hosting / CDN
Please use this host or your own to load particles.js on your projects