Basic Moving Particle System With jQuery And CSS - flying-circles

File Size: 3.83 KB
Views Total: 5083
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Moving Particle System With jQuery And CSS - flying-circles

Yet another particle system written in jQuery and CSS that helps you create highly customizable, randomly animated particles in the background.

More features:

  • Random size, opacity, and color.
  • Configurable animation speed.
  • Custom color, size, and density.

Popular Particle System Libraries:

How to use it:

1. Link to jQuery library and the jQuery flying-circles plugin.

<script src="" 
<script src="jquery.flying-circles.js"></script>

2. Create a container element in which you want to render the partcile system.

<div class="moving-circles"></div>

3. Initialize the plugin to generate a default particle system.


4. Customize the particles with the following options.

    accurancy: 100,
    color: 'red',
    size: 20,
    speed: 20000,
    randomOpacity: true,
    randomSize: true,
    randomColor: true

5. Customize container of the particle container.

    selector: '.moving-circles',
    width: '100%',
    height: '100%'

This awesome jQuery plugin is developed by reinkarnator. For more Advanced Usages, please check the demo page or visit the official website.