Simple Pulsating Circle Animation with jQuery jPulse Plugin
File Size: | 12.3 KB |
---|---|
Views Total: | 6727 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jPulse is a super tiny jQuery plugin that helps you implement a customizable pulsating circle (square for old IE) animation on any html element.
Basic Usage:
1. Include the latest jQuery javascript library and jpulse.js script at the bottom of your page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jQuery.jPulse.js"></script>
2. Create an Html element where you want to implement the animation on.
<img class="demo" src="1.png" width="150px" height="150px" border="0" alt="Twitter"/>
3. Initialize the plugin with options.
<script type="text/javascript"> $(".demo").jPulse({ color: "#993175", size: 120, speed: 2000, interval: 400, left: 0, top: 0, zIndex: -1 }); </script>
Change logs:
2014-02-28
- update
2014-02-28
- Added zIndex in options
This awesome jQuery plugin is developed by DavisMiculis. For more Advanced Usages, please check the demo page or visit the official website.