Thursday, September 21st, 2006

CSS Crossfading Example

Category: Examples, Prototype

Mike Arace has written up a simple CSS Crossfading example, demonstrated here.

The post details the HTML, CSS, and JavaScript required:

javascript

  1. // this array consists of the id attributes of the divs we wish to alternate between
  2. var divs_to_fade = new Array('box-1', 'box-2', 'box-3');
  3.        
  4. // the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
  5. var i = 0;
  6.            
  7. // the number of milliseconds between swaps.  Default is five seconds.
  8. var wait = 5000;
  9.  
  10. // the function that performs the fade
  11. function swapFade() {
  12.     Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
  13.     i++;
  14.     if (i == 3) i = 0;
  15.     Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
  16. }
  17.            
  18. // the onload event handler that starts the fading.
  19. function startPage() {
  20.     setInterval('swapFade()',wait);
  21. }

Posted by Dion Almaer at 9:36 am
16 Comments

+++--
3.7 rating from 115 votes

16 Comments »

Comments feed TrackBack URI

May be worth noting that the code uses prototype / scriptaculous. I know, I know, looking at the code it’s obvious…

Comment by Thomas Messier — September 21, 2006

Anyone wanting a JQuery version of this can find it here:

http://www.intoajax.com/fade.htm

Comment by Rey Bango — September 21, 2006

To call this a “CSS crossfade” when it uses 170KB of JavaScript vs 2KB of CSS is stretching things a little.

Comment by Dean Edwards — September 21, 2006

I agree with Dean, though I don’t think the filesize it a big deal if you use this as a small part of a larger use of the frameworks in your site… Prototype compressed is 21kb… yadda yadda…

Comment by Mario — September 21, 2006

it becomes almost worthless at 170KB…the same effect could be acheived with even better looking results in flash for probably around 5KB…ignorning the fact that you have to download flash player…but who hasnt got flash player.

Comment by seb835 — September 22, 2006

Ajax技术讨论 — 抓虾

幻影动画现象。

Trackback by Jason — September 22, 2006

What!?! Is my first comment invisible? 8P
Read Why Chef Boyardee Doesn’t Write Javascript @ Encytemedia
http://encytemedia.com/blog/articles/2006/07/26/why-chef-boyardee-doesnt-write-javascript.

I don’t understand how some developers can miss the point of a js framework. No, you would not use this example with Prototype and Scriptaculous if this crossfade is all you wish to create, but if you have an application built with Scriptaculous and Prototype then why not add these couple lines of code to create a cool effect. Sometimes I think devs get hung up on the filesize (*cough* js compression *cough*) and completely miss the point.

If compression makes you warm and fussy then these links will help.
http://dean.edwards.name/packer/
http://dojotoolkit.org/docs/compressor_system.html
http://www.phpclasses.org/browse/package/3158.html

Comment by Mario — September 22, 2006

The effect is amazing. I believe that one day I’ll try to reduce the Prototype library to the stricly needed by the effect. :-)

Comment by Matte — September 22, 2006

Fadding mediante CSS

Se trata de mostrar distintas capas (por ejemplo, noticias) en un mismo recuadro, usando un efecto de fadding entre cada capa. Es necesaria la librería de script.aculo.us para que funcione. Un código sencillo que nos permite hacer un fundido entre…

Trackback by Sentido Web — September 22, 2006

…Don’t see what the big deal is.
There’s been scripts that did this for years and years…(checks dynamicdrive.com) …. and years and years and years.

example from 2004
http://dynamicdrive.com/dynamicindex2/fadescroll.htm

and I don’t think it’s deserving to use ‘CSS’ as part of the name of this thing.

Comment by jimbo — September 22, 2006

[…] CSS Crossfading Example […]

Pingback by Austoon Daily » CSS Crossfading Example — September 22, 2006

A pesar del tamaño del paquete de archivos que los hacen funcionar (170KB), se trata de un ejemplo bastante visual, con una transcisión muy suave.
No es como otros crossfading, que hacen un fundido a blanco para eliminar el primer elemento y pasa al siguiente, en éste los dos elementos consecutivos se funden entre sí.

Bastante útil!, aunque necesita pasar por una redución de peso del Script.aculo.us y convertirlo en un sólo .js en formato light.

Comment by Andres — September 22, 2006

Again.. another person here agreeing with Dean..

I looked at this and thought “Oh.. scriptaculous…”

Yeah.. it might be neat and tidy… but is this really anything valuable enough to be a point of interest these days?

It’s been done… more than enough times.. and almost anyone into Ajax can hack up a clean cross-fader using CSS and Javascript.

Sorry to put a dampner on things.. but it seems people are making noise about the slightest little things these days… and I want to see some really innovative uses that stretch the barriers. — This unfortunately, does little more than show how to cleanly use Scriptaculous. *yawn*

Comment by Tim Leonard — September 22, 2006

Javascript / CSS Crossfader

In response to this article at ajaxian.com, and just for the sheer fun of it, here’s a small-footprint object-encapsulated unobtusive javascript crossfader. Download the Crossfader files At 1.7Kb it’s one hundredth of the size of the scriptaculous li…

Trackback by Brand Spanking New — September 25, 2006

[…] getruehbten hauptes muss ich gestehen: anfangs konnte ich mir unter dem croofader nichts genaueres vorstellen, aber so man dass beispiel sieht  ist es ne feine sache.offenbar baut ES auf den artikel von ajaxian auf                          CSS Crossfading Example […]

Pingback by Javascript crossfader / Brand Spanking « mon petit web - chindogu — October 24, 2006

Nice one!

Comment by Michal — October 25, 2006

Leave a comment

You must be logged in to post a comment.