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:

• Creating Particles With Canvas and Pure JS
• Particle System Background with Parallax Effect
• Responsive Particles Animation

How to use it:

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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.

$(function(){
  Dots.generate();
});

4. Customize the particles with the following options.

$(function(){
  Dots.generate({density
    accurancy: 100,
    color: 'red',
    size: 20,
    speed: 20000,
    randomOpacity: true,
    randomSize: true,
    randomColor: true
  });
});

5. Customize container of the particle container.

$(function(){
  Dots.generate({density
    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.