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.

jQuery.pulsate.js

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 :

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

Let see the complete source code to build more understanding on JQuery Pulsate Animation Effect.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pulsate.js"></script>
<style> 
.button {
width:260px;
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
margin : 40px;
float:left ;
text-align:center;
}
  
</style>
 <script>
    $(function () {
     $(".pulse").pulsate();
     $(".pulse1").pulsate({glow:false});
     $(".pulse2").pulsate({color:"#800000"});
     $(".pulse3").pulsate({reach:100});
     $(".pulse4").pulsate({speed:2500});
     $(".pulse5").pulsate({pause:1000});
     $(".pulse6").pulsate({onHover:true});
  $(".pulse7").pulsate({
      color:"#FFC300",reach:50
  });  
    });
 
 
 </script>
</head>
<body>
   
 <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> 
 </body>
 </html>

Output :

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

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/JQuery%20Pulsate%20Animation%20Effect


No comments:

Post a Comment