Add Motion To Website: jQuery Animation Plugins From 2010
Valters Bergspics
In our niche it’s very important to be up to date with latest technologies and features available to impress new clients, show of in portfolio and add functionality more easily – using some advanced code snippets, plugins or hacks.
jQuery possibilities are growing rapidly and there are many people who play with code and discover some amazing combinations achieving effects you have never seen before!
You will find here many plugins which will help to add motion, 3d effects and animation to your website! This list will blow your mind away with possibilities – ready?!!!
1. AJAX-ZOOM – Image Zoom – Pan Gallery plugin
AJAX-ZOOM is a sophisticated image zoom & pan gallery plugin based on jQuery and PHP. With over 250 options it is very flexible and can be integrated into any website.
2. Image Rotator
Simply rotates an image by a certain degree or allows the user to rotate an image by dragging around a central axis.
3. Cloud Zoom
The Cloud Zoom plugin is comparable to commercial image zoom products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.
4. jQuery Before/After Plugin
5. jQDock
Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.
6. Visual Lightbox – Create fantastic lightbox-style galleries and slideshows. jQuery LightBox Plugin.
7. Image Bubbles
Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images.
8. jQuery Panel Magic
jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.
9. iCheckbox
Convert a checkbox or multiple checkboxes into iphone style switches.
10. jqFancyTransitions
jqFancyTransitions is plugin for displaying your photos as slideshow with fancy transition effects.
11. Images In All Size jQuery Plugin
12. Text Effects
13. jCoverflip
jCoverflip is a jQuery cover flow widget that allows website administrators to present featured website content in a visually appealing manner. The widget is quick setup and is highly configurable, and can run as a Drupal Module or standalone.
14. BxSlider
bxSlider is a jQuery content slider plugin that is light weight and easy to use.
15. jScratchcard plugin
16. jQuery Menu Style 1 – Drop Down Menu with Visual Effects
17. Frame Animation Plugin for jQuery
18. Cusor Hover Buttons
This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site.
19. jQuery carrousel
The core allows to create your own controls or effects. This plugin transform an “ul li” into an animated carrousel.
20. 2D Transform
This plug-in utilizes the matrix filter in IE and the new CSS3 transform properties to 2d transform any DOMElement.
21. jPhotoGrid
This plugin displays a list of image thumbnails in a grid and allows them to be zoomed open. It’s a cool and simple effect.
22. jMagnify
jQuery jMagnify, plugin attach a ola effect to some text following the mouse position.
23. animaDrag: Animating Drag and Drop Plugin
24. jOla
25. Flight Board
This plugin sets a division to flip between text messages like a flight board at an airport. It alternates between two or more messages by flipping individual characters.
26. 3D Cloud Carousel
This is a fast and cross-browser implementation of a 3d carousel – looks very nice, more like a Flash implementation. It can create dynamic reflections underneath the carousel items, is accessible and degrades nicely without JavaScript.
27. 3D Feature Image Carousel
This plugin rotates images in a three dimensional (simulated) carousel. Optionally, all images can have a description element attached to them that pops up on an overlay whenever that image rotates to the center.
28. Smooth Anchors jQuery Plugin
This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.
29. HoverAttribute
HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering.
30. Expanding Grid
Creates grid system out of divs. On hover the active grid expands to ratio set by the config, fades out the background.
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Vadim
Posted 29 days ago 21Similar effect for high resolution images:
http://www.ajax-zoom.com/examples/example20.php
World of Nyrris
Posted 113 days ago 20Awesome list with some really great examples.
Will surely use some of them.
Thanks,
sms chat
Posted 319 days ago 19I really like your post.
You list some nice plugins that are really helpful to use.
Thanks for sharing!
CodeMyConcept
Posted 444 days ago 18A great way of helping people choose what is best for them.
An awesome article, keep it up!
Michael
Posted 602 days ago 17Can anyone recommend a plugin for WordPress similar to BxSlider?
Marco
Posted 628 days ago 16Some great ideas on here
Arun M
Posted 710 days ago 15Great listing. Thanks for sharing.
mike
Posted 711 days ago 14really great list!! loved it.. I think the first one was probably the coolest..
chennamadhu
Posted 711 days ago 13thanks for your nice post…..got the required knowledge from your each and every jquery plugin links….once again thank you very much
.-= chennamadhu´s last blog ..Indian Bank Recruitment of Clerks-Last Date, Apply Online =-.
Crunchy_82
Posted 713 days ago 12Thank you also for the post. I am all the more determined know to get the hang of the code so I can turn my images into something special. I would like rollover images which allow you to zoom in on them when you hover your mouse over them ( such as in this site: Duoboots ). Also I want to make them into images which turn 360degrees. How would I do this? Could it be done within the coding on one image or will I have to have one or the other? Can anyone shed some light?
Biber Gazı
Posted 713 days ago 11Thank you for sharing has been nice knowing I’m constantly sharing
and keep track of your shares I would like to share my very nice and informative shares
Awesome article, I’m going to use some of the plugins for sure. Thanks!
As Prefabrik
Posted 713 days ago 10Thank you for sharing has been nice knowing I’m constantly sharing
and keep track of your shares I would like to share my very nice and informative shares
Jogos Gratis
Posted 713 days ago 9I love jquery. the user don’t have to install any plugin and the animation are as goog as the ones made in flash.
jeremy
Posted 714 days ago 8That before/after plugin is sweet!!!!
Jordan Walker
Posted 714 days ago 7Excellent round up of important improvement that every designer and developer can add to a website to increase the user interactivity.
Avinash
Posted 714 days ago 6As always , nice post !!
Proud to be a regular reader of 1stwebdesigner.com
Multyshades
Posted 714 days ago 5wonderful post on this topic, thanks for share with us the latest jquery animated plugins.
.-= Multyshades´s last blog ..40+ Most Useful Free Premium WordPress Themes =-.
Andrzej Mazur
Posted 714 days ago 4Awesome article, I’m going to use some of the plugins for sure. Thanks!
Arafat Hossain Piyada
Posted 714 days ago 3Just learned some decent idea on jQuery. Thanks for sharing.
.-= Arafat Hossain Piyada´s last blog ..Learn On Site SEO From Google(Video) =-.
Mas
Posted 714 days ago 2Nice list. Keep posting articles like this.
Kent Design
Posted 714 days ago 1Now i have some great ideas! Thanks for the post