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

Archive for the ‘Effects’ Category

Animated GIFs can have up to 256 colors & they are not interactive.

jAni is a lightweight jQuery plugin for animating background images which can be an alternative to animated GIFs (in some cases).

It simply changes the position of a long background image in given distances & speed.

jQuery Background Animation Plugin

The plugin has few options for controlling it:

  • start, stop, pause
  • speed
  • loop on/off
  • dimensions of the frames

As it will require JavaScript to be enabled, using jAni combined with other JavaScript events (like animating a better-quality Ajax loader) would be very functional.

AEXT.NET, a blog focused on web design & development, is presenting a very detailed tutorial on creating bubbles effect (like Apple Dock) with CSS.

The tutorial includes two methods: CSS sprites (basic) & the image swapping (advanced) which will be generating the same visual output.

CSS Bubble Effect

The effect is very functional specially for list items where items are small in size & the user may have difficulty in pressing the desired one.

It is accomplished with pure CSS (can be improved further with JavaScript for a smoother effect) & compatible with all major browsers.

jQSlickWrap is a jQuery plugin for wrapping content around images.

It uses the HTML 5 canvas tag very smartly by analyzing the original image, the CSS properties for it & re-drawing the image.

jQSlickWrap jQuery Plugin

The usage is as simple as calling a function like: $('.classToBeWrapped').slickWrap();.

The plugin also offers several option for customization like setting the resolution or background color of the image to be created.

jQuery has built-in animations & effects. But when it comes to switching between 2 objects, you may need to code a little more for a flawless display.

ImageSwitch is an easy to use jQuery plugin for switching between images using effects.

jQuery ImageSwitch

The plugin supports various effects like fade in/out, fly in/out, flip in/out, scroll in/out, single door & double door.

And, the code of the plugin is well-commented which makes it easier to improve it.

Tip: Besides the Groject.ImageSwitch.js, check this .js file too to better findout how the plugin works.

Parallax effects give a feel of depth & increase the visuality so much.

mParallax is a MooTools implementation of the popular jQuery plugin: jParallax (see WRD post).

MooTools Parallax

It eases creating parallax effects with offering various customization options.

There are nice examples presented like this & this.

Sexy Curls jQuery plugin is an open source solution for creating a page curl feature with ease.

It uses the jQuery UI & its resizable package.

jQuery Page Curl Plugin

It provides settings to customize the look & usage:

  • side: for defining which direction the curl effect will occur
  • turnImage: image used to create the effect
  • max. height, starting height & starting width

The smoothness of the curl effect is very impressive.

There is also another jQuery plugin named Page Peel which also accomplishes a similar result, but uses a Flash file.

$fx() is a JavaScript animation library which is only 3.7kb.

Within a timeline, any CSS property can be altered. And also:

  • you can combine effects
  • group them to the chains and run parallel
  • set different callbacks what gives you even more flexibility.

JavaScript Animation Library

$fx() is definitely not an alternative to other well-known JavaScript frameworks. On the other hand it does its job (animation) good & if that’s what you need, then it saves you from loading bigger sizes of JS files.

Have a look at the examples.

Pixastic is an open source JavaScript image processing library.

It uses HTML5 Canvas element that enables accessing to raw pixel data.

JavaScript Image Effects Library

Supported effects are:

  • desaturation/greyscale
  • invert
  • flipping
  • brightness/contrast adjustment
  • hue/saturation
  • emboss
  • blur & more

There is an image editor built with it & the library is well-documented.

DD_roundies is another rounded corners solution that is very easy to implement & cross-browser compliant.

This rounded corners script doesn’t use any images, works in IE6 without AlphaImageLoader & lightweight (3.62kb compressed).

Easy Rounded Corners

Radius of the corners are not fixed & can be defined.

As the major problem for rounded corners lies beneath IE, this rounded corners script uses VML (inspired from Jonathan Snook’s solution). A possible future problem is IE8 -currently- does not support VML.

  • Tags:
  • Filed under: CC License, Effects, Goodies
  • Seadragon is a technology, by Microsoft, for deeply zooming images of any size. It provides almost perfect transitions independent from the sizes of the images.

    Seadragon Ajax is an interface for using/embedding this technology to any website.

    Seadragon Ajax

    Seadragon can be used in 2 ways:

    Developers can customize viewers & controls with the Seadragon Ajax Library. It is also available at the Silverlight platform.

    Uptime Robot