Best jQuery Animation Plugins & Tutorials with Demo

Developer/Designer Page Layout Concept with JavaScript

Developer/Designer Page Layout Concept with JavaScript

Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When you open the demo, you’ll notice a kind of “glitch” effect on some words and also on the portrait. The glitch reveals the “coder side”. When clicking on the “coder” switch in the lower left corner, the image will be taken apart and animated with little rectangles, revealing another image behind. At this point everything will switch to the developer (or coder) view.

Grid Loading Animations with JavaScript & CSS

Grid Loading Animations with JavaScript & CSS

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.

Animated Wobble Window jQuery plugin

Animated Wobble Window jQuery plugin

Wobble window is a lightweight jQuery plugin that applies a wobble effect to your HTML elements backgrounds.

jQuery SVG Progress Plugin

jQuery SVG Progress Plugin

This is a unique and one-of-a-kind jQuery plugin that allows you to display infographics on your web resource. Its main feature is a large variety of figures to be precise then six.

Dimensions of each figure are formed based on the size of the block to which jQuery-svg-progress was applied, which gives great flexibility in use. Accordingly, the size of the contour of figs perfectly adapts when loaded on mobile devices.

jqGifPreview : Gif Preview with jQuery

jqGifPreview : Gif Preview with jQuery

jQuery Plugin For GIF Preview As Like Facebook.

Water Ripple effect jQuery plugin

Water Ripple effect jQuery plugin

I was always fascinated by the “water ripple effect” and so it was time to deal with it. The result is a small jQuery plugin, which you can easily integrate into your projects. As with my last jQuery plugins, you can use the “water ripple effect” with, or without jQuery. As a zip and minifiert is this plugin only 2KB large.

Stack Motion Hover Effects with CSS & JavaScript

Stack Motion Hover Effects with CSS & JavaScript

Today we’d like to share some tiny hover effect ideas with you. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.

AniCollection : Collection of CSS Animations

AniCollection : Collection of CSS Animations

AniCollection is a collection of awesome CSS3 animations from many libraries and many people. To give you an easy way to find, use and share it.

First Person Sunglasses with CSS & JavaScript

First Person Sunglasses with CSS & JavaScript

Today we’d like to share a fun little experiment with you: a geeky “try-on” sunglasses effect. It’s not a “try-on” in the classical sense for previewing how the sunglasses might look on a person, but instead how the view looks like when putting on some sunglasses and looking through them. For that we use a simple overlay effect and some animations to mimic the movement you do when you try on glasses from the first person perspective.

P2.js : JavaScript 2D physics library

P2.js : JavaScript 2D physics library

2D rigid body physics engine written in JavaScript. Includes collision detection, contacts, friction, restitution, motors, springs, advanced constraints and various shape types.



Best jQuery websites design awards