Interactive Background Particle System In JavaScript - daisy.js
File Size: | 49.3 KB |
---|---|
Views Total: | 3996 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.