10 jQuery Transition Effects: Moving Elements with Style
Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.
1. Fluid Navigation – How to create an informative menu-bar with jQuery & CSS
Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.
2. Move Elements with Style
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.
3. Automatic Image Slider w/ CSS & jQuery
A simple image slider using HTML/CSS/Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.
4. jQuery Quicksand Plugin
With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:
- 1. Use plain HTML, like an unordered list.
- 2. Download data by an Ajax call
- 3. Transform HTML items by JavaScript (for example, sort them differently)
5. jQuery Magic Line Sliding Style Navigation
The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.
6. Text with Moving Backgrounds
The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.
Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!
7. jDiv: A jQuery navigation menu alternative
A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:
- More flexibility in design that your usual UL style;
- The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy’s layout;
- As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.
8. Halftone Navigation Menu With jQuery & CSS3
A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
9. Animate Panning Slideshow with jQuery
Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we’ll have a slideshow that transitions by changing the visible window.
10. SlideDeck
SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.
Wow! Wonderful lot of JQuery effects! Thanks for share it!
Man i LOVE these
i can’t get enough of jQuery. Great post, thanks!
Great List, last link not working though
Excellent list, great work. Thank
These are great, perfect for one of my upcoming projects, thank you!
It’s really interesting article. Thanks for good information.
I liked “#6. Text with Moving Backgrounds”
The end of days for the Flash is coming..
So many different people come up with new solutions regularly. It is impressive to see, what’s possible with a lot of inspiration and little bit jQuery!
Great list.
Great list, thanks for sharing.
wow! these are amazing and inspiring. i am just starting jquery in school and these are incredibly inspiring for my final project. thanks for putting this together!
It’s so powerful.
It’s very good.
These are some awesome jQuery effects, extremely useful. Thanks for sharing these!
yes, it’s awesome, though i don’t know how to write the code thing, i actually use jQuery on my blog, the theme i chose was designed with it
Awesome list. Really inspiring.
Good JQuery ,But Can not Understand it !~
Su Zhou,Jiang Su,China
Slidereck is not working in lower version of IE and Mozilla
Very good
Nice bunch of F/X!!!! Thanks for sharing!
好呀！赞一个
Great list
nice compilation.
The quicksand one is quite nice.
I don’t usually like lists, but this one was filled with useful stuff, thanks!
不错，怎一个爽字了得
These are fantastic samples. Love it.
Great article! Thanks for the list
This is just Flawless! Thanks!
excellent !
jDiv is genius. I’ll be using that in a design at first opportunity.
No one have an alternative to slidedeck. I need a javascript similar to kwick whic h allow me to add content to the sliding panels…
Thanks…
great work!thanks for share!
Thanks fur sharing. Though I am new to web development tools but I am sure this would help me a lot in learning about jQuery.
还是不懂好，不懂就没烦恼了
i am just starting out with JQuery so this article is very timely – thanks for sharing. will be using in some of my upcoming projects.
keep up the good work.
Excelent! Thanks for sharing!
really nice list. I really like the sliding labels. Guess I’ll use it in one of my future projects
Nice list! the moving background under text is damm sick!
Check out my project: http://www.skingenerator.com. It is a free jquery menu generator with some cool effects
Thanks!
thanks for sharing. great article.
thanks for nice sharing. great article.