Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,151,188 members, 7,811,480 topics. Date: Sunday, 28 April 2024 at 12:42 PM |
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".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 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 |