marcbruederlin / Particles.js
Licence: mit
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Stars: ✭ 1,336
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Particles.js
priority-plus
A modern implementation of the priority plus navigation pattern.
Stars: ✭ 30 (-97.75%)
Mutual labels: responsive, vanilla-javascript
React Native Confetti Cannon
React Native confetti explosion and fall like iOS does.
Stars: ✭ 149 (-88.85%)
Mutual labels: particles, animated
Baguettebox.js
⚡ Simple and easy to use lightbox script written in pure JavaScript
Stars: ✭ 2,252 (+68.56%)
Mutual labels: responsive, vanilla-javascript
React Components By Ruvkr
A collection of Responsive Animated Mobile friendly Lightweight React Components
Stars: ✭ 319 (-76.12%)
Mutual labels: animated, responsive
React Responsive Picture
A future-proof responsive image component that supports latest Picture specification
Stars: ✭ 91 (-93.19%)
Mutual labels: responsive
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (-94.01%)
Mutual labels: responsive
Vue Draggablecal
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped
Stars: ✭ 79 (-94.09%)
Mutual labels: responsive
Match Media
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95 (-92.89%)
Mutual labels: responsive
Infima
A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
Stars: ✭ 82 (-93.86%)
Mutual labels: responsive
Float Labels.js
A zero-dependency plugin that applies the float label pattern to a form.
Stars: ✭ 91 (-93.19%)
Mutual labels: vanilla-javascript
Jekyll Cloudinary
Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
Stars: ✭ 79 (-94.09%)
Mutual labels: responsive
Quasar Apexcharts
📊 📈 📉 Project using Quasar framework and ApexCharts.
Stars: ✭ 94 (-92.96%)
Mutual labels: responsive
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-94.16%)
Mutual labels: responsive
Vue Responsive
A plugin for responsive handling with vue.js
Stars: ✭ 86 (-93.56%)
Mutual labels: responsive
Natural Gallery Js
A lazy load, infinite scroll and natural layout list gallery
Stars: ✭ 93 (-93.04%)
Mutual labels: responsive
Animated Stars Android
Draw animated stars on Android view canvas - written in Kotlin
Stars: ✭ 85 (-93.64%)
Mutual labels: animated
particles.js
particles.js is a lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Installation
There are several ways to install particles.js:
- Download the latest version
- Install with npm:
npm install particlesjs --save - Use the CDN:
https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js
Usage
Include the minified JS in your HTML (right before the closing body tag).
<body>
…
<script src="path/to/particles.min.js"></script>
</body>
Add a canvas element to your markup (it should be the last element)
<body>
…
<canvas class="background"></canvas>
<script src="path/to/particles.min.js"></script>
</body>
Add a few styles to your css.
html,
body {
margin: 0;
padding: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
Initialize the plugin on the window.onload event.
window.onload = function() {
Particles.init({
selector: '.background'
});
};
Options
| Option | Type | Default | Description |
|---|---|---|---|
selector |
string | - | Required: The CSS selector of your canvas element |
maxParticles |
integer | 100 |
Optional: Maximum amount of particles |
sizeVariations |
integer | 3 |
Optional: Amount of size variations |
speed |
integer | 0.5 |
Optional: Movement speed of the particles |
color |
string or string[] | #000000 |
Optional: Color(s) of the particles and connecting lines |
minDistance |
integer | 120 |
Optional: Distance in px for connecting lines |
connectParticles |
boolean | false |
Optional: true/false if connecting lines should be drawn or not |
responsive |
array | null |
Optional: Array of objects containing breakpoints and options |
Example how to use the responsive option.
Methods
| Method | Description |
|---|---|
pauseAnimation |
Pauses/stops the particle animation |
resumeAnimation |
Continues the particle animation |
destroy |
Destroys the plugin |
Example how to use the public methods.
Browser Support
IE9+ and all modern browsers.
Examples
See various examples how you can use particles.js.
Build
To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:
- Clone the repository:
https://github.com/marcbruederlin/particles.js.git - Change in the project directory:
cd particles.js - Install the dependencies:
npm install - Run the gulp build task
gulp buildto regenerate thedistfolder.
You can also rungulp build --watchto watch for file changes and automatically rebuild the files.
Using particles.js?
If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you shoot me a link to it.
For any problems or questions don't hesitate to open an issue.
License
particles.js is created by Marc Brüderlin and released under the MIT license.
Version 1.x
The source code for particles.js 1.x has been moved to the v1 branch.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].