Interactive Background Particle System In JavaScript - daisy.js

daisy.js is a JavaScript plugin to create a mobile-friendly background particle system with an interactive parallax effect that reacts to cursor move and motion sensor (gyroscope & accelerometer).

Based on HTML5 Canvas API and works both with jQuery and Vanilla JavaScript.

How to use it:

1. Load the main JavaScript daisy.js in your document.

<!-- As A JavaScript Plugin -->
<script src="/path/to/src/daisy.js" defer></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/daisy.js" defer></script>

2. Attatch the plugin to the target container where you want to generate the particle system.

// As A JavaScript Plugin
document.addEventListener('DOMContentLoaded', function () {
  daisyjs(document.getElementById('container'), {
    // options here
  });
}, false);

// As A jQuery Plugin
$(document).ready(function() {
  $('#container').daisyjs({
    // options here
  });
});

3. Customize the appearance of the particles.

daisyjs(document.getElementById('container'), {
  density: 10000, // how many particles will be generated: one particle every n pixels
  dotColor: '#666666',
  lineColor: '#666666',
  particleRadius: 7, // dot size
  lineWidth: 1,
  curvedLines: false,
  proximity: 100, // how close two dots need to be before they join
});

4. Customize the animation of the particles.

daisyjs(document.getElementById('container'), {
  minSpeedX: 0.1,
  maxSpeedX: 0.7,
  minSpeedY: 0.1,
  maxSpeedY: 0.7,
  directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
  directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
});

5. Enable/disable the parallax effect.

daisyjs(document.getElementById('container'), {
  parallax: true,
  parallaxMultiplier: 5, // the lower the number, the more extreme the parallax effect
});

6. Callback functions.

daisyjs(document.getElementById('container'), {
  onInit: function() {},
  onDestroy: function() {}
});

---

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