25
May
// php the_time('Y') ?>
You'll remember Scrollorama, the popular jQuery plugin for creating chic scrolling effects.
There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.
It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.
The website of the resource shows its flexibility and there is a short-yet-enough documentation provided.
Requirements: jQuery
Compatibility: All Major Browsers
30
Apr
// php the_time('Y') ?>
Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.
With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect.
Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.
Requirements: jQuery
Compatibility: All Modern Browsers
26
Apr
// php the_time('Y') ?>
Parallax scrolling, creating an illusion of depth by moving web elements in different speeds while scrolling, can help offering an attractive browsing experience.
Skrollr is a lightweight (7kb minified – 3k gzipped) and standalone JavaScript scrolling animation library that simplifies bringing such parallax effects to life.

It allows us to animate the CSS properties of any element according to the horizontal scrollbar position. Defining key frames for each element at certain points in top offset is enough for that.
And, the library is perfect for designers who are not good at JavaScript as -almost- everything is defined inside HTML elements and no JS coding.
Requirements: No Requirements
Compatibility: All Modern Browsers
18
Apr
// php the_time('Y') ?>
Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.
The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.
P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.
Compatibility: WebKit & Firefox
23
Mar
// php the_time('Y') ?>
Blur.js is a flexible jQuery plugin for implementing blur effect to any web element.
It actually works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm.

The source of the blurred item (it can use the background of body or other HTML elements), radius of the effect and it is positioning can be defined with ease.
There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI).
Requirements: jQuery
Compatibility: All Major Browsers
6
Mar
// php the_time('Y') ?>
For websites with many design elements and content, in order to help users to focus on the content, applying an opacity on images and removing when hovered is usually a good idea.
Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such hover effects.
With a simple function, we can choose the "start effect (normal, transparent or overlay)" and the images will become less catch until they are hovered.

There are 20+ built-in and attractive transition effects that will display the images "as is" when users hover them.
Also, multiple configuration options exists for further customizing the transitions.
Requirements: jQuery
Compatibility: All Major Browsers
3
Jan
// php the_time('Y') ?>
Scrollorama is a jQuery plugin for creating eye-candy effects in parallel to the scrolling of web pages.
By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.
The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

Requirements: jQuery
Compatibility: All Modern Browsers
21
Dec
// php the_time('Y') ?>
Textualizer is a lightweight (4kb minified) jQuery plugin for creating good looking effects on text.
The plugin accepts any number of sentences (or words) and can rotate them smartly and beautifully.

Once a sentence is about to rotate with the other one, the letters that will be re-used are kept and move to their new locations with several effects to choose from (fadeIn, slideLeft, slideTop).
It is possible to define the duration that each item will be displayed and also the duration of the transitions. Also, functions exist to stop or pause the rotation.
Requirements: jQuery
Compatibility: All Major Browsers
14
Nov
// php the_time('Y') ?>
CSS transitions and transforms provide a wide range possibilities for animating and morphing HTML elements.
If you would like to use them inside jQuery, jQuery Transit reaches to the rescue.
It is a plugin for implementing CSS transitions and transforms, has the same syntax as .animate, supports most of the methods and has the jQuery juice like callbacks, chaining, auto-browser-prefixes and more.

The plugin uses jQuery’s effect queue by default, so, transitions will never run in parallel.
It doesn't offer compatibility with older browser versions as real CSS3 rules are applied (rather than .animate) but degrades nicely and/or you easily force it to siwtch to the frame-based animation.
Requirements: jQuery
Compatibility: All Modern Browsers
27
Oct
// php the_time('Y') ?>
For any web project, if it is only the animations we need, wouldn't it be nice to use a lightweight framework rather than a complete and big-sized one?
jsMorph is a standalone JavaScript animation framework which can manipulate stylings of multiple HTML elements.
The framework automatically detects start positions, converts units, adjusts rendering speed and corrects time leaks for smoother rendering experience.

It is only 2.3kb, chainable, well-documented (supported with examples) and works pretty fast (with an optimized browser rendering buffer usage).
And, there is a queuing system which allows morphing multiple items.
Requirements: No Requirements
Compatibility: All Major Browsers