Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Effects’ Category

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

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.

PACE.js

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.

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
  • Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery.

    It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

    Lazy Line Pianter

    And, after that, just insert that code into any web page and it will work.

    Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed.

    The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.

  • Tags:
  • Filed under: Effects, Goodies, Other License
  • 0 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com