Crossfader v0.1
UPDATE: The documentation is up »
So I have been hard at work on a variety of javascript and css widgets for a number of projects and I wanted to share one of them with you. I will write up a howto and documentation in the next few days but I thought a preview was in order.
So what is it?
Crossfader is a javascript library that uses prototype and scriptaculous to create a ajax loaded set of divs that are show one by one with a cross fade transition. The container div’s can hold anything from an image to text, to a form if need be.
What’s so cool about it?
- Optional overlays on top of the visible div (even transparent ones in IE)
- Optional player controls availble.
- Best of all only the first container is loaded on page load, so the size is kept to a minimum and each subsequent container is loaded behind the scenes via ajax for a smooth transition and optimal performance.
Can I see it?
Sure, but before you do this example is for use on media websites like cnn.com, aol.com or fresnobee.com. Why use flash to scroll your top sections and their photos when you can use this? (hint hint) This example hows you the possibilities of this script for a specific purpose where as it is built in such a way you can do anything you like very easily.
Notes
I will be making a Ruby on Rails helper (yes helper, not plugin) for this in the next week or so.
Jan 20th 2007
So you’re aware, using an opacity fade on text or any containing element in IE7 disables all font antialiasing. This makes small text, particularly sans-serif text like you use for the subtitle, look really bad (windows 3.1 bad.)
You should consider using a different transition such as a slide up to appear the text if you want to service IE users. (Then again, IE positioning is really badly broken at the time of this writing, so maybe you just don’t care about IE.)
Jan 21st 2007
StoneCypher
Yeah I know, we hate IE
In the upcoming docs you will see a specific feature addressing this problem. You have the ability to set a toggleOverlay value to tell the crossfader to include the overlays in the transition or to make the disappear/appear at the transition start/finish. Check out the demo in both IE and say Firefox to see the difference.
Thanks for the heads up!
Jan 22nd 2007
Simply sweet.
Apr 16th 2007
Where is the Crossfader documentation (Link is broken)?
Apr 16th 2007
Where is the documentation ?
Apr 17th 2007
Anyway to get the documentation to experiment or implement?
Apr 18th 2007
Is there documentation forthcoming?
Apr 19th 2007
Hey guys,
So I took it down because its pretty complicated but I have posted it back up. However I would suggest you wait about a week and I will put out the next version which will require you to put in no markup at all and will have a TON of bug fixes. Also, this weekend I have a nice treat coming along that you may find equally as useful
Oct 8th 2007
Kevin,
Awesome job on the script. It looks and functions awesomely. I just wanted to check in and see how the progress was going on it and if you had a chance to work on the Ruby on Rails helper for it. Keep rocking it!