Thursday, September 21st, 2006
CSS Crossfading Example
Mike Arace has written up a simple CSS Crossfading example, demonstrated here.
The post details the HTML, CSS, and JavaScript required:
JAVASCRIPT:
-
-
// this array consists of the id attributes of the divs we wish to alternate between
-
var divs_to_fade = new Array('box-1', 'box-2', 'box-3');
-
-
// 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"
-
var i = 0;
-
-
// the number of milliseconds between swaps. Default is five seconds.
-
var wait = 5000;
-
-
// the function that performs the fade
-
function swapFade() {
-
Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
-
i++;
-
if (i == 3) i = 0;
-
Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
-
}
-
-
// the onload event handler that starts the fading.
-
function startPage() {
-
setInterval('swapFade()',wait);
-
}
-
3.7 rating from 110 votes
May be worth noting that the code uses prototype / scriptaculous. I know, I know, looking at the code it’s obvious…
Anyone wanting a JQuery version of this can find it here:
http://www.intoajax.com/fade.htm
To call this a “CSS crossfade” when it uses 170KB of JavaScript vs 2KB of CSS is stretching things a little.
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…
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.
Ajax技术讨论 — 抓虾
幻影动画现象。
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
The effect is amazing. I believe that one day I’ll try to reduce the Prototype library to the stricly needed by the effect. :-)
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…
…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.
[...] CSS Crossfading Example [...]
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.
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*
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…
[...] 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 [...]
Nice one!