• 12 minutes

35+ Excellent jQuery Animation Techniques and Tutorials


Image Zoom Tour with jQuery

It is a perfect fit for image-intensive websites or personal portfolios. Tags, additional images, and smooth fade-in effect are involved in the realization of this trick that gives the project a more impressive look.

Circular Content Carousel with jQuery

This script enables you to demonstrate pieces of HTML data infinitely. You can employ block text, images or videos as well as style them and customize to your needs. There is also a small navigation panel with controls. The main drawback, as usual, is that the trick does not work correctly in iPad.

Portfolio Image Navigation with jQuery

It allows your online audience to feel the whole power hidden in your works. The main navigation that is realized through images is an excellent way to grab the users attention and enhance the portfolio. You can move through a series with the help of standard arrows or a grid-style controller.

Dynamic Page / Replacing Content

Chris Coyier keeps up with the trends so that the article features an old and improved version of a solution. It works with and without JavaScript, however, thanks to the latter one the page has got more dynamic appeal. It can include not only text but also forms and some multimedia content.

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Learn MoreOther Products

jQuery Sticky Footer

As a rule, regular long parallax-powered pages are marked by sticky headers that consist of navigation, logo and some other integral stuff. Sticky footer looks a bit uncommon, yet it can also come in handy. You can put in here a banner, extra links or a helpful ‘Back to Top’ button. The tutorial introduces you to a simple technique of creating one from scratch that displays data in non-intrusive way.

Bubble Point Tooltips with CSS3 & jQuery

It shows you a simple way of adding an extra information to links through a bubble tooltips that look like an old-timey contextual menu in OS X. The design is based on CSS, and bolstered by smooth animations provided by jQuery.

jQuery MagicLine Navigation

The tutorial demonstrates how to add a zest to a streamline nav bar that is inherent to the majority of modern websites. Although the idea is pretty straightforward, however, the all magic is done by JavaScript; CSS is used only for styling.

Chained AJAX Selects

Martin Angelov introduces you to an advanced technique that implies the utilization of server-side language PHP in order to make it a real live sample that can be hooked to an existing database. The tutorial is targeted at skilled users who are able to understand the intricate code.

HTML5 File Uploads with jQuery

It shows how to build a standard drag-and-drop interface for uploading files that will be straightforward and handy for users. The solution is possible thanks to new File Reader API, Drag and Drop API and Ajax. There is also a progress bar for indicating status and a preview window.

Shuffle Letters Effect: a jQuery Plugin

It adds a flair and playfulness to headlines and titles. The article covers a solution of building a jQuery plugin that will affect the text content inside any DOM element.

Display your Favorite Tweets using PHP and jQuery

Martin Angelov continues to sharing with us interesting solutions that imply a combination of PHP and jQuery that perfectly work on every website. He explains how to write a special class that will display only favorite tweets and present them in a beautiful frame provided by CSS styling. The technique was shortly updated in order to meet the new Twitter API.

Bubble Slideshow Effect with jQuery

It adds a circular vibe and draw the whole attention to images. The effect is powered by a plugin called bgpos.js that deals with a background-position property. The trick involves a plenty of JavaScript stuff so that before putting it to work you should understand all the details.

Photobooth with PHP, jQuery and CSS3

Since the solution involves the use of web camera the developer leverage a flash movie and special wrapper webcam.js to provide a script with access to the device. As for the rest, everything is plain and obvious: HTML is for a basic structure, CSS is for creating beautiful skin, PHP is for receiving data from flash and JavaScript for other magic.

1 2 3
Andrian Valeanu

Designmodo Founder. From 🇲🇩, based in 🇪🇸, I speak 🇷🇴 🇷🇺 🇪🇸 🇬🇧, my activity 🖥 🤘 ⚽ 📸 🌇.

Posts by Andrian Valeanu

Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.

Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree