Sharing...: juillet 2012

Since its arrival, jQuery has caught the web by storm and now it is one of the preferred solutions in creating fancy animations. This raging popularity of the JavaScript library is due in part to its being lightweight, being easy to maintain and widespread browser support. Right now, you can see jQuery effects applied in a number of ways that effectively demonstrate its power to define and control small-scale web animations.
Until newer technologies like CSS3 becomes matured with adequate support from major browsers and all, jQuery will continue to stay. We will still be seeing a lot of its application in navigation interfaces, sliders and other image display mechanisms, in enhancing web typography and more going forward.
So, to help you work your way around jQuery, we are sharing with you some of the jQuery animation tutorials available in the web now. As you will find out, these tutorials will help you acquire the skills in making different animation effects that you will need in designing interesting websites. Let us go and explore them with the view of improving our craft after every tutorial. Enjoy!

Animated Text and Icon Menu with jQuery

This tutorial will teach you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

Merging Image Boxes with jQuery

This tutorials will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter.

jQuery hover fade method (modified)

This technique uses jQuery to modify the markup and to animate to fade transition. On the demo, you can see that the button switches on and the changes color on hover.

Animated Form Switching with jQuery

In this tutorial you will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.

Creative Button Animations with Sprites and jQuery

Here, you will create buttons that change its color on hover.

Building an Animated Cartoon Robot with jQuery

This tutorial will teach you how to make a cool animated cartoon that runs once it loads up.

Animate a hover with jQuery

Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio.

How to Load In and Animate Content with jQuery

In this tutorial you will be taking your average everyday website and enhancing it with jQuery. You will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. Also, you will also be integrating some awesome animation effects.

Automatic Infinite Carousel

In this tutorial you will learn how to make a carousel that you can scroll infinitely by repeating the images

Animated Content Me.nu with jQuery

Here, you will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, the background image is going to change according to which menu item was clicked.

Beautiful Background Image Navigation with jQuery

In this tutorial you are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in.

Dream Night Animation with jQuery

This is an animation in which colored bubbles appear on random positions, grow in size and then fade out. This effect really looks so cool.

Puffing Smoke Effect in jQuery

A tutorial on how to make a puffing smoke effect on the header of Gaya Design blog.

Animate Curtains Opening with jQuery

Tutorial on how to slide sideways and reveal additional add with jQuey article.

Create a Funky Parallax Background Effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Creating an Animated 404 Page

This tutorials will teach you how to create an animated 404 page, which you can easily customize and improve.

Create a unique Gallery by using z-index and jQuery

create-a-unique-gallery-using-z-index-and-jquery

In this tutorial you will create a unique picture gallery utilizing the CSS property z-index. In the example it has a pile of pictures, on the next action it puts the first picture on the last position and on the previous action it gets the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures.

jQuery Parallax Tutorial – Animated Header Background

This tutorial will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.

How to Make an Impressive Animated Landscape Header with jQuery

how-to-make-an-animated-landscape-header-with-jquery

This tutorial will teach you how to create a landscape header that appears to reveal additional content.

Creating a Slick Auto-Playing Featured Content Slider

This tutorial will teach you how to a make a slider in the sidebar to show Script & Style links, Featured Posts, and Popular Posts.

Create a Realistic Hover Effect With jQuery

This tutorial will show you how to make a rising hover effect to a set of icon using jQuery’s animate effect. The icons used here have reflections and others with shadows.

How To Create a Cool Animated Menu with jQuery

create-a-cool-animated-effect-with-jquery

In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.

Create a Cool Animated Navigation with CSS and jQuery

create-a-cool-navigation-with-css-and-jquery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. This tutorial will show you how to build a really cool animated navigation menu using just CSS and jQuery.

Animate Image Filling Up Using jQuery

In this tutorial, you have images that will slide up/down above the layer and create a unique fill effect (aka paint dripping).

Crafting an Animated Postcard With jQuery

In this tutorial you will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek to see an outline of what you’ll be learning today.

Animated Menus Using jQuery

Build An Incredible Login Form With jQuery

create-an-incredible-login-form-with-jquery

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it.