Within the jQuery library, there are thousands upon thousands of different effects that can be applied to your page to create a unique and dynamic user experience. Animation using mark-up has become more and more prevalent as of late, since animation that uses flash is losing its relevance and its place in modern web (An explanation that I will save for another post).
jQuery is a library that we have used before to create a smooth scroll effect so we have already learned how to call a jQuery library into your page. If you do not remember, Google has uploaded and hosts versions of jQuery right on their website.
We will start off by linking to the jQuery library version 1.9.1 . This goes in the <head></head> tags in your HTML mark-up.
<head> <title> PAGE TITLE </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head>
Now that we have linked the correct version of the jQuery library to our HTML page, we now need to add jQuery to our page so that we can create the animation. I will break the script we will use down into pieces and explain the parts of the script and what they do.
** The script can be put in the <head></head> tags under your jQuery library call, but for a faster page load time, I suggest adding it to the very bottom of your HTML page, under your content right before you close your <body></body> tag.
We then set the class (for this example we will set our class as heart) we will use to identify the p, span, h1, a, etc. that will use the function and we set our class to the jQuery function .animate :
Lastly, we need to set the font size we will start off with, and the size we wish to have our text shrink to and repeat the size we start with so that we get a bouncing or pulsating effect. We set our animation speed, and apply our function so the effect will act the way we set it. Dont forget to close your </script> tag at the end!
fontSize: $('.heart').css('fontSize') == '60px' ? '55px' : '60px' }, 500, animateHeart); }); </script>
All together, the script appears as:
In order for this effect to work, make sure you dont forget to apply the class to a section in your HTML!
Using this bit of jQuery, you can help improve the UX on your website and add pull the users eye to information that may be of importance or to links they should be clicking on.
Thanks for stopping by, as always. Good Luck and have fun developing!
- Introduction to jQuery (learnslate.org)
- 20 Most Amazing See Examples Of jQuery Tutorials (hturl.wordpress.com)
- Some Important jQuery Tips and Tutorials for Web Designers (shameemullahs.wordpress.com)
- jQuery Fun Today (devguy.co)