Animated Particle Background Plugin - jQuery animated-bg.js
File Size: | 5.95 KB |
---|---|
Views Total: | 3707 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
animated-bg.js is a small jQuery plugin to create a fancy attractive background by animating custom particles using CSS3 animations.
How to use it:
1. Insert the JavaScript library jquery.animated-bg.js
after jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"> </script> <script src="jquery.animated-bg.js"></script>
2. Attach the function animatedbg
to the element where you want to generate the animated particle background.
<div class="animated-bg"> ... content here </div>
$(document).ready(function(){ $('.animated-bg').animatedbg({ // options here }); });
3. Define an array of colors assigned to the particles.
$(document).ready(function(){ $('.animated-bg').animatedbg({ colors : ["#7dcbd4", "#fdc014", "#acd573", "#fff"], }); });
4. Set the maximum amount of particles.
$(document).ready(function(){ $('.animated-bg').animatedbg({ numParticles: 50 }); });
This awesome jQuery plugin is developed by konalexiou. For more Advanced Usages, please check the demo page or visit the official website.