Saturday, January 20, 2018

JQuery Pulsate Animation Effect

This post explain how to create JQuery Pulsate Animation Effect. With the help of jquerypulsate library you can create a pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way. This pulsate animation is created by Kilian Valkhof.


Adds a pulsating effect to elements by following below steps:
1. Include the Jquery Library File.
2. Include pulsate Library file.
3. Mention the below code  to display pulsate animation effect to particular element :

  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 only.

Let see the complete source code to build more understanding on JQuery Pulsate Animation Effect.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pulsate.js"></script>
.button {
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
margin : 40px;
float:left ;
    $(function () {
 <div class="button pulse"> $(".pulse").pulsate()</div> 
 <div class="button pulse1"> $(".pulse1").pulsate({glow:false}) </div>
 <div class="button pulse2"> $(".pulse2").pulsate({color:"#800000"}) </div> 
 <div class="button pulse3"> $(".pulse3").pulsate({reach:100}) </div>   
 <div class="button pulse4"> $(".pulse4").pulsate({speed:2500}) </div>
 <div class="button pulse5">  $(".pulse5").pulsate({pause:1000}) </div>
 <div class="button pulse6">  $(".pulse6").pulsate({onHover:true}) </div>
 <div class="button pulse7">  Click Me </div> 

Output :

This is all about Jquery pulsate animation effect. In case of any queries please do comments in comment box below.

Download Link :

Also you can check out css circle animation effect demo.

No comments:

Post a Comment