Flexcal Transitions

I had far too much fun playing with these effects when I should have been doing real work, but they demonstrate what is possible.

Default transition

Just hide the old and show the new.

Fading transition

This shows that you can pass additional parameters in the options, and get them by using this

Vertical sliding transition

This shows how to use the rev argument; reverse transitions scroll up.

Horizontal sliding transition

This shows how to use this to get the localization object to determine if "reverse" transitions should be right-to-left or left-to-right. Use the page up and page down keys to see this best.

Cycle plugin

You can use Mike Alsup's excellent cycle plugin to control the transition effects, with some attention to setting the correct options.

[In order to demonstrate both the original cycle and the new cycle (called cycle2 but it uses the same name as a plugin) plugins, I renamed them cycle1 and cycle2, and swap the names as needed.]

Cycle2 plugin

Mike Alsup also has cycle2, which is aimed more at markup-based slideshows rather than programmatically-controlled ones, so it requires a little more hacking to get it to work. It has some cool effects, though.

CSS3 transitions

CSS3 transitions allow for some cool effects that do not rely on javascript; just change classes with transition set and it works. For instance, using this:

We can do this:

Flexcal slot machine

Ages ago Stefan Petre made a cute little jQuery-based slot machine plugin, long since lost to all but The Internet Archive. I spent a few hours inspired by that making this transition: