jQuery is by-far the most popular solution for creating sophisticated animations and effects. Other than being quick, minified and hence lightweight, it is easy-to-use, and has a high compatibility among all browsers. Combined with HTML 5 and CSS3 it makes the web super interactive.
Enough said about the perks of jQuery, and let’s take a look at some of the coolest jQuery plugins.
Not every visitor loves a banner. In fact, most of them simply ignore it. However, with an animated effect that makes the banner move and dance in front of their eyes, they are bound to look at it! And even a few seconds worth of attention would do. Static banners are part of the bargain on most webpages, but they aren’t as effective as the animated ones. Check this one out!
Animated Menu Icon with CSS3 and jQuery
I’ve seen plenty of static menu icons, but this one is definitely different. The menu icon is animated with the hover effect and after one click it transforms into a cross icon indicating the “closing” of the menu. This can be done using different techniques including jQuery. Find out how.
Revealing Photo Slider
The revealing photo slider is a great way to reduce the amount of space used up by your photo gallery and adding that surprise element to your images. This is quite popular among e-commerce webpages where the product displayed at first may only be a small thumbnail. However, clicking on it will reveal the entire photo along with the information about the product or the image. It’s totally cool!
The parallax effect on web pages is relatively a new thing and people are still experimenting with it. This isn’t just a simple animation. This is a sophisticated science that plays with the layers of the webpage to give an entirely unique animated effect. jQuery parallax, or jParallax, turns nodes into precisely positioned layers which move corresponding to mouse movement. With the help of a little CSS you can alter the way the layers react to windows.
If you have a complete magazine of webpages, you’ll love this one! Who says webpages have to be flat? Add this cool 3D effect that turns the pages of your webpages just like they would in real life inside a magazine, newspapers, or a book. The fold effect using this jQuery plugin will work just as well on your “webpaper”.
If you’re looking for a cool text effect, you might want to try this plugin. Textillate is an easy-to-use plug in that will make you text jump, roll, fall, swing, and other crazy moves. This will add a unique effect to a specific text you want to highlight.
Make a certain object fly around and circulate on your webpage using this jQuery plugin. You can make a pen fly around a paper, bubbles float around in circles, and so much more. In this tutorial Chris Coyier, the CSS-Tricks coder, explains how to animate an object on the webpage and make it go round and round it circles.
Animated Landscape Heading with jQuery
Find out how Zach Dun uses the help of jQuery plugins such as jQuery easing plugin and jQuery Delay plugins to create a hidden heading animation. He believes that not all content has to be visible. What about making a certain heading pop out from unexpected locations? You can also use this example to make other elements pop out of nowhere on your webpage in a similar fashion.
Merging Image Box
Animated Text and Icon Menu
To be honest, I don’t like my icons doing too many fancy tricks. It’s just an icon! If you’re looking for something more professional-looking, this icon should do! Learn how to create a slick menu with a cool animated hover feature. The inspiration of these coot icons came from the Pelican Miami Beach Hotel webpage. With 8 different effects to choose from, you’ll be amazed at the possibilities of this plugin.
Learn More: 15 Creative CSS3 Animation Examples