jQuery Pulsate – adds an effect that’s useful for focussing end user attention to a certain part of your webpage in a subtle way.
jQuery.pulsate started out as an experiment with outline-offset
by Kilian Valkhof. By animating it you can create a pulsating effect that’s useful for focussing attention to a certain part of your webpage in a subtle way.
Usage
Simple example:
$(element).pulsate();
Custom options (defaults are shown)
$(element).pulsate({
color: $(this).css("background-color"), // set the color of the pulse
reach: 20, // how far the pulse goes in px
speed: 1000, // how long one pulse takes in ms
pause: 0, // how long the pause between pulses is in ms
glow: true, // if the glow should be shown too
repeat: true, // will repeat forever if true, if given a number will repeat for that many times
onHover: false // if true only pulsate if user hovers over the element
});
Works in Chrome, Safari and Firefox. Prettiest in Firefox since it supports Outline-radius
It’s also available with basic feature in jQuery UI Effect animation http://jqueryui.com/effect/
Website/Demo:Â http://kilianvalkhof.com/jquerypulsate/
Thanks for reading,
Nabeel Shahid.