Archive for the ‘Effects’ Category

When using text over images, if the image is random, the text can become unreadable once the text + image colors are similar.

BackgroundCheck is a small JavaScript library for preventing such issues by auto-changing the style of the element to a darker or lighter one.

BackgroundCheck

Once an element overlaps an image, it adds  .background--dark or .background--light classes to it. And, creating the related styles for each class would be enough.

It is possible to limit the functionality to only selected images, define the dark/light threshold and more.

Parallax.js is a lightweight solution for creating parallax effects.

Besides mouse/cursor support, it works on mobile and tablet (where gyroscope or motion detection hardware is available) too.

It comes with multiple options for customizing the effect where they can be set inline using “data attributes” or in JavaScript.

The library can work standalone or as a jQuery and Zepto plugin (2 versions exist).

Parallax.js

Long shadow effects are widely used to create a depth for any element in flat design.

There are several ways to create this effect easily (like this Photoshop file) and, as expected, there is a jQuery way too.

jQuery Flat Shadow

jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted.

It is possible to define the shadow color, angle and enable/disable the fading.

Flat design is used by all major mobile operating systems + many popular websites and it is a rising trend.

This trend has its sub-trends where one of them is the “long shadow” effect used on elements.

These shadows are usually applied in 45 degrees and used for icons or logos.

Long Shadow Generator

In order to create such effects with ease, there is a free PSD file called Long Shadow Generator (which works with smart objects).

Shadows are available from both sides and they work with any type of layer.

Text animations in websites were so popular once Flash was used widely and now, simplistic, non-animated websites that put the content in front are the way to go.

However, if used wisely, there is still room for such animations, and, a jQuery plugin named Textillate.js simplifies creating them.

The plugin makes use of Animate.css + Lettering.js and it is capable of creating lots of animations like flash, bounce, shake, pulse, fade, rotate, flip and much more.

Textillate.js

  • Tags:
  • Filed under: Effects, Goodies, Other License
  • 1 Comment