Random bits of free software

CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.)

What does it do?

CrossSlide can do a few different things, depending on how it's called:

Slide + cross-fade

Loading…
Credits to spacetrucker, hichako, jayniebell, and ruminatrix for the nice summer pictures.

This is the kind of animation from which the plugin takes its name. Here is the jQuery code to set it up:

#test1 is the block-level element (such as a div) whose contents will be replaced with the animation. What you put inside it in your HTML is only shown while the images are being preloaded, or if the user-agent has JavaScript turned off. In this example it is a simple "Loading…" message (reload this page to see it.)

The first parameter to the crossSlide() function call is a dictionary of options, which will be explained by example through this page. The second parameter is an array of objects, defining the sequence of pictures, each with its source path and various attributes.

To get this first kind of effect you must specify the motion speed (in px/sec) and the duration of the cross-fade between images (in sec), plus the direction in which each image should be moving. The plugin computes the rest, panning each image edge-to-egde at the desired speed, in the desired direction. dir must be one of up, down, left or right. For best results I recommend using an even number of pictures and alternating directions, as in the example.

Static cross-fade

Loading…

Pretty simple effect, whose invocation is just as simple:

Notice how the sleep parameter has taken the place of speed, as there can be no speed in an image that's not moving. fade is still expressed in seconds and is additional to the sleep time. You cannot use both speed and sleep at the same time, because they mean different effects.

Ken Burns effect

Loading…

Finally, CrossSlide can be brought up to the full visual power of a Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning:

Every picture's pan & zoom effect takes time seconds plus the two cross-fades, each taking an additional fade seconds. from and to define the starting and ending points of the effect, including the cross-fade part. They are composed of a background-position value, following the same syntax of the CSS property of the same name, and of an optional zoom factor. The zoom defaults to 1x if not provided. The background-position part only accepts keywords and percent values: lengths are not supported. As in CSS, the percentages are interpreted as horizontal followed by vertical, while the keywords can be put in any order.

You can have the animation loop just once, or a fixed number of times, by adding a loop option to the first parameter, alongside fade, sleep or speed. You can also have the images shown in a random order every time the page is loaded, by adding a shuffle: true option. The last option is most useful with static cross-fade animations.

Every picture can be made a hyperlink, by adding a href parameter with a relative or absolute URI. In this example, they point to the websites of the photographers. You can also add an onclick parameter, pointing to a function that will handle clicks.

Performance

This kind of effect relies on the browser for positioning, scaling and cropping images, through CSS and the DOM. Thus it depends heavily on how the browser and the underlying graphics platform optimize these operations. Compared to native implementations of the same effects, CrossSlide is quite CPU-intensive, but recent hardware handles a moderate usage without problems. A few combinations of browsers and platform seem to be less optimized than others, namely Firefox on Mac OS X and Linux. Every other combination I've tested shows decent performance: Firefox on Windows; Internet Explorer, Safari, and Opera.

Download

jquery.cross-slide.js (size: 11K; license: GPL; last updated on 12 Mar 2009)

You will also need jQuery itself, of course. Don't forget to invoke CrossSlide inside a DOM-ready handler, like every other visual effect:

jQuery(function($) {
  //put your jQuery code here
});

See the jQuery documentation for more info.

This personal web site is not affiliated with, nor does it represent the views, position or attitude of my employer or of their clients.