Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,188 members, 7,811,480 topics. Date: Sunday, 28 April 2024 at 12:42 PM

Jquery Pulsate Animation Effect - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Jquery Pulsate Animation Effect (802 Views)

How To Create A Simple Responsive Navigation Bar Using Html, Css And Jquery / Free HTML5, CSS3 And Basic Javascript (jquery) Training / Free Online Training For Html/css, Javascript, Jquery, Mysql, Php, Java, Android (2) (3) (4)

(1) (Reply)

Jquery Pulsate Animation Effect by skptricks: 1:37pm On Feb 10, 2018
http://www.skptricks.com/2018/01/jquery-pulsate-animation-effect.html

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 :

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"wink.pulsate();
$(".pulse1"wink.pulsate({glow:false});
$(".pulse2"wink.pulsate({color:"#800000"});
$(".pulse3"wink.pulsate({reach:100});
$(".pulse4"wink.pulsate({speed:2500});
$(".pulse5"wink.pulsate({pause:1000});
$(".pulse6"wink.pulsate({onHover:true});
$(".pulse7"wink.pulsate({
color:"#FFC300",reach:50
});
});


</script>
</head>
<body>

<div class="button pulse"> $(".pulse"wink.pulsate()</div>
<div class="button pulse1"> $(".pulse1"wink.pulsate({glow:false}) </div>
<div class="button pulse2"> $(".pulse2"wink.pulsate({color:"#800000"}) </div>
<div class="button pulse3"> $(".pulse3"wink.pulsate({reach:100}) </div>
<div class="button pulse4"> $(".pulse4"wink.pulsate({speed:2500}) </div>
<div class="button pulse5"> $(".pulse5"wink.pulsate({pause:1000}) </div>
<div class="button pulse6"> $(".pulse6"wink.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

http://www.skptricks.com/2018/01/jquery-pulsate-animation-effect.html

(1) (Reply)

How Taxi Booking Apps Can Boost The Profitability Of Taxi Businesses / Learn Web Development And Application / Buy And Sell Google Adsense Globally

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 14
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.