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

Archive for the ‘Effects’ Category

Paper.js is an open source and "JavaScript + HTML5 canvas-powered" vector graphics scripting framework.

Besides being a wrapper for the "canvas", it has much more to offer like working with nested layers, groups, paths, compound paths, rasters, symbols, etc.


These items are handled and drawn automatically by Paper.js so you can focus on styling and/or modifying them.

It tries to use the code smartly for faster execution and less CPU usage.

The framework has methods for mouse and keyboard interaction. And, it has the well-known blend modes from Illustrator and Photoshop with JS emulation like: multiply, screen, overlay, soft-light, hard-light, color-burn, darken, lighten,  hue, saturation, luminosity, color and more.

Mashi is an open source JavaScript toolkit for creating timeline-based, Flash-like movies and complex animations using HTML, CSS + JS.

It is standalone, modular, object-oriented and lightweight. Additional plugins are only required for advanced usage.

In contrast to other animation tools,  Mashi uses a scene-based timeline. So you are not limited to a timeline divided into dozens of equal frames per second but you can split your timeline into self-contained and independent scenes at will.


The toolkit has an automated preloader which loads images used in advance for a better user experience.

Mashi has a "controls" module which provides buttons like "play" and "pause" with their logics and it works in all major browsers including mobile and tablet.

Although images are usually expected to be static elements, customizing them on the client-side (via JavaScript) can be very handy considering the ability to applying effects and changing them anytime while still keeping the original files.

vintageJS is a jQuery plugin that uses the HTML5 <canvas> element for adding a retro feel to images.

WRD Retro Logo

It has 3 ready-to-use effects (sepia, green, grayscale) and can be customized very easily by creating new presets with values like vignette, noise, desaturate, viewfinder and more.

The website of the resource also has a web-based editor for applying these effects any image instantly and downloading them.

jQuery.Easie.js is a plugin for the popular JavaScript framework for creating CSS3-like easing animations.

With the help of a web-based drag 'n' drop interface, it enables you to create the easing curve and generates the related jQuery + CSS3 code automatically.

jQuery Easie.js

This way, you can use the CSS easing code for supported browsers and the JavaScript code as a fallback.

The plugin is lightweight (2kb) and works pretty fast by using lookup tables.

CamanJS is a JavaScript image manipulation library that makes use of HTML5 <canvas> tag.

With a simple-to-use interface, advanced filters including saturation, contrast, gamma, brightness or exposure can be applied.

CamanJS JavaScript Image Manipulation

It has a layer system -similar to the ones in Photoshop or GIMP- that creates so many possibilities.

The library can be extended with new plugins and filters where a detailed "how-to" exists on that subject.

CamanJS is standalone, can be safely used with any other JavaScript libraries and also has a NodeJS-compatible version.

rotate3Di is a jQuery plugin that makes it possible to perform an isometric 3D flip or 3D rotation of any HTML content.

The plugin uses CSS3 transforms and also helps creating any custom 3D effects.

There are various options offered like the position of the element in degrees, duration/direction of the animation and callbacks on every level.


CSS3 boosted the use of custom fonts and styles in websites. However, it still doesn't offer a complete down-to-the-letter control.

Lettering.js, a lightweight and easy to use Javascript <span> injector for radical web typography aims to fill this gap.


It simply divides any given element into pieces of <span>s wrapping each letter with a custom class.

Just like <h1 class="fancy_title">WRD</h1> into:

<h1 class="fancy_title">
  <span class="char1">W</span>
  <span class="char2">R</span>
  <span class="char3">D</span>

After that, we just need to create the styles for each letter on the CSS side to create dynamic awesome outputs.

P.S. Lettering.js can also split words besides the letters.

  • Tags:
  • Filed under: Design, Effects, Font, Goodies
  • 1 Comment
  • PaintbrushJS is a JavaScript library for applying effect to images on the client-side.

    It makes use of the canvas element and works by applying a class to an element on the web page and setting few parameters with some extra HTML attributes.

    The filters it supports currently are: blur, grayscale, mosaic, noise, posterize, sepia and tint.


    Flip! is a jQuery plugin that enables you to flip any HTML, text or jQuery element beautifully.

    It is possible to set the direction of the effect, right-to-left, up-to-down or vice versa of both, the content to be displayed after the flip and the background of it.

    Also, optionally, you can define the speed of the animation and use the callback functions: onBefore, onAnimation and onEnd.

    P.S. Tutorialzine shares a very nice tutorial using the plugin.

    jQuery Flip Plugin

    Wadda is a lightweight JavaScript library that uses HTML5 canvas for zooming images.

    It comes in 2 JS files, one for the common functions an the other for the wadda function.

    The library simply displays the original-sized-image inside a "lens effect" that must be mentioned in the thumbnail's title tag.

    Canvas Image Zoom

    Wadda has several options for customization like the zoom level, lens size, enable/disable lens fade effect and the x/y offsets from the mouse cursor.

    It is compatible with every canvas-enabled browser and will work on others using the explorercanvas library.

    Uptime Robot