Archive for the ‘Effects’ Category

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.

jQuery Real Shadow Plugin

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.

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.

Hakim El Hattab (, 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.

CSS Scroll Effects

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 to see various other exciting stuff.

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).

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.

Adipoli- jQuery Hover Effect Plugin

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.

  • Tags:
  • Filed under: Effects, Goodies, MIT License