Archive for the ‘Effects’ Category

Web animation was always a possibility even dating back to the 1990s. But back then very few people had Internet access, and the technologies were so new it was difficult to create meaningful effects. Nowadays there are significantly more resources for animated web effects – yet there’s still an even balance between meaningful and silly animations.

This gallery focuses on 20+ interesting animated effects that you can recreate using JavaScript.

Happy Snowman

happy animated moving snowman css

Read the rest of this entry »

When an image will be used on a web page, editing is usually performed at applications built for it (like Photoshop).

For advanced editing and cropping, that is required but for simple ones, using JavaScript can be good choice. And, that leaves the original image un-edited so we can always change the filters applied.


PhotoJShop is a jQuery plugin that enables us to apply such simple effects/filters to images.

These filters include blur, sepia, emboss, lighten, darken, b&w, sharpen and more.

The plugin works on canvas + images and the filters to be applied can be chained for easier usage.

Rotating text is not a heavily preferred UI pattern but it has its uses, specially for landing pages.

This jQuery plugin, by Pete R., makes such text-rotating so easy and fun.

jQuery Text Rotator

It works by simply storing the “to-be-rotated content” inside a <span> with class rotate and separating them with commas. The plugin handles the rest.

There are multiple rotating effects and the interval can be customized too.

Odometer is a JavaScript-CSS library for creating effects/interfaces that are familiar from “car mileage displays, airport info boards or slot machines”.

The library is standalone + lightweight (3kb) and uses CSS transformations for the effect which works pretty fast (has a fallback too).

Odometer With Javascript

It simply transforms the value of a given element to another pre-defined value with a single-line function.

And, there are few options for customization like the theme or the duration of the effect.

PACE is a JavaScript library for adding good-looking loading bars to any website with ease.

There are multiple loading effects: YouTube-like, corner indicator, page fill and more.


It requires very less effort; simply insert the JavaScript file with the selected theme and PACE works automatically for page load and ajax requests.

The library doesn’t require any JS frameworks and can, optionally, be tweaked manually.