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
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
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
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 14 May 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.