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
   
Simple Pulsating Circle Animation with jQuery jPulse Plugin

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

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.