A CSS Crossfader Demo
For a long time, people looking to introduce animations to their website needed to resort to a third-party plugin such as Flash or Java applets to get the job done. The recent rise of AJAX and DHTML have changed the argument substantially. Semantic web programming, CSS, and Javascript form a powerful platform which can be tweaked by a knowledgable developer to do all sorts of cool things.
In this particular demo, I am going to show how to build a browser-agnostic crossfading effect using Script.aculo.us, a Javascript effects library.
In a crossfade, the content fades from one set of data to another gradually without needing to remove the first set completely before loading the second.
The particular site I will be building is visible here. It is not an example of the most stylish in web design, but I hope it can serve its functional purpose. :)
I have placed all of the code in a single file to make following it easier, and have applied comments to the CSS and Javascript sections to give the reader some idea what everything is for.
Before running the example you will need to grab the Script.aculo.us libraries available here.
The Markup
The markup is fairly trivial. You can generally design the page as usual until you reach the portion involving the content which you would like to rotate between. From the example above, that section looks like this:
<div id="crossfade-container">
<div class="fade-box" id="box-1">
<h2>Buy Our Product!</h2>
<p>
Lorem...
</p>
</div>
<div class="fade-box" id="box-2" style="display: none;">
<h2>It's New and Improved!</h2>
<p>
Cras...
</p>
</div>
<div class="fade-box" id="box-3" style="display: none;">
<h2>We Provide Great Services!</h2>
<p>
Nullam...
</p>
</div>
</div>
Notice there is a outer container. This is important as it is where the background-image must be specified to work around IE 6.0’s nasty background-image flicker bug caused when the browser redownloads the images every time a DHTML effect is applied to the element. In searching the web for a workaround I was unable to find any consensus. You can turn on the browser’s caching, something most developers never do, or you can avoid it by setting the background in a container’s CSS styling.
Also notice how the individual blocks that will be swapped have a class, id, and style attribute set. The class is used to set things which are common between the elements, such as positioning and the styling in my case. The ids let you specify unique attributes for each block. The style is a little wierd. You should theoretically be able to put the “display: none” in the id CSS blocks for the two DIVs which are not displayed initially, but that didn’t work for me. The second two blocks would never show, perhaps due to how Script.aculo.us implements the fading.
The CSS
In order to get the three alternating boxes to appear in the same place you must position them absolutely. This is done in the .fade-box class, with “position: absolute” and “top: 163.” By not setting a “left” declaration, the boxes inherit the position of their container element and appear in the correct area of the screen as you change resolutions.
Another interesting part of the CSS: Since the background image for the box is set in the container as described above, my IE looked a little off as it transitioned from one text block to another. Text would shift slightly, making it appear darker, and then the new text would suddenly appear looking normal.
To counteract that, I added a background color to the P and H2 tags. This seemed to solve the problem, but also required a width to be set to keep them inside the pretty rounded-rect box.
The Javascript
Script.aculo.us makes fading in and out really easy. Its Effect.Fade and Effect.Appear functions take several arguments that can modify their behavior; I used “duration” to set the length of time of the transition, and “from” and “to” to set the before and after opacity. From there it is simply a matter of getting it to perform the transition at a set interval (accomplished using the browser’s setInterval() function) and adding some logic for how to alternate between the various code blocks. In my example I had an array containing the ids of the swappable elements and would increment a counter with each iteration, reseting it to zero when it went out of bounds.
Conclusion
You can accomplish a lot on your website through the use of the tools your browser vendor provides and a few well-developed libraries. The advantages of sticking with the browser are numerous:
- Pages load faster without needing to download large binary files.
- Your site can be updated without resorting to third-party applications. There will also be fewer vendor dependencies.
- The webpages are more easily scanned by search engines since they don’t need to deal with binary files, just well-formed markup.
- Your users will enjoy a familiar, HTML-based interface.
Script.aculo.us and the other Javascript libraries out there are adding new effects and capabilities all of the time. I encourage you to check back with them as you start new projects.
Til next time.
Posted: September 18th, 2006 under Tech Tips.
Comments: 127
Comments
Comment from Mr Angry
Time: September 18, 2006, 8:49 am
That’s really interesting. How much testing has been done on browser compatibility? If this degrades well it’s a major breakthrough. Being able to build effects that don’t require a specific plugin has a lot of potential.
Comment from Me Myself
Time: September 18, 2006, 5:42 pm
Loved it.
Comment from RanK
Time: September 18, 2006, 6:23 pm
It fails to run if the Firebug extension is enabled. Firebug reported that Effect was not defined on line 121 (Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });), but after disabling Firebug it ran perfectly.
Comment from mike
Time: September 18, 2006, 7:07 pm
Thanks for the tip, RanK. I didn’t get a chance to test it too thoroughly, only checking it out in IE 6 and FF 1.5.
Comment from Allan
Time: September 18, 2006, 7:21 pm
I’m a newbie, but:
Isn’t the inline display:none obtrusive? Wouldn’t it be better to write that in via the jS?
Thanks. Good article :)
Comment from Tim Harper
Time: September 19, 2006, 12:26 am
shaweet!
Comment from Cypher
Time: September 19, 2006, 4:09 am
Great. I will swap my old (so 2000) ticker for this new one that I implemented on the intranet of a client of mine.
ThanX
Comment from kishore
Time: September 19, 2006, 5:40 am
Great,
it looks cool, never thought before such things are possible with simple inside browser without using Flash or JAVA.
Thankyou.
Pingback from links for 2006-09-19 « Breyten’s Dev Blog
Time: September 19, 2006, 7:47 am
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: css cool webdev animation scriptaculous) […]
Comment from pip
Time: September 19, 2006, 11:35 am
Great piece of code. thanks!
Comment from Dustin Diaz
Time: September 19, 2006, 11:47 am
FYI: “Semantic web programming” : Writing HTML is not programming. I’m also not sure how CSS is doing the fading, but rather the JavaScript modifying the DOM.
For future reference, you do not need 70k~80k (maybe 20k when minified) of JavaScript code (ala Script.aculo.us / Prototype) to do a simple fade-in and fade-out. Fading is as simple as this one recursive function:
var fade = function(element) {
var fn = function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac <= 90 ) {
element.style.opacity = '.'+newOpac;
element.filter = "alpha(opacity:"+newOpac+")";
setTimeout("fn('"+newOpac+"')",20);
}
else {
element.style.opacity = '1';
element.style.filter = "alpha(opacity:100)";
}
}(0);
};
Cheers.
Comment from dan
Time: September 19, 2006, 7:18 pm
If the browser has JavaScript disabled, then all but the first block of rotating content will be invisible to the end user.
i.e. it needs to be fail-safe.
It would be better if you marked up the content as three distinct and visible blocks of content, each floated alongside or below the previous one, and then use JavaScript to ’stack’ them and run the cross-fader.
Pingback from Like Your Work » Blog Archive » links for 2006-09-20
Time: September 19, 2006, 8:22 pm
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: css ajax) […]
Pingback from TimmyBLOG » links for 2006-09-20
Time: September 19, 2006, 8:34 pm
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: ajax css javascript scriptaculous webdesign) […]
Pingback from links for 2006-09-20 « Richard@Home
Time: September 20, 2006, 1:24 am
[…] Mike-O-Matic » A CSS Crossfader Demo Fade out one block and replace it with another using Script.aculo.us and Prototype (tags: scriptaculous prototype css) […]
Comment from greut
Time: September 20, 2006, 4:04 am
i++
if (i == 3) i=0
can be written with modulo :
(i + 1) % 3
Nice trick !
Comment from manuel
Time: September 20, 2006, 1:17 pm
Sorry for the troll, but scriptaculous is not browser-agnostic. I doesn’t even degrade nicely on IE 5.0 (thorws js errors).
We’d better follow Dustin Diaz’s advice :)
Comment from Viktor
Time: September 21, 2006, 3:34 am
i like this one more. http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=87
it’s easier to implement and degrades nicely if js is disabled.
Pingback from Ajaxian » CSS Crossfading Example
Time: September 21, 2006, 10:36 am
[…] Mike Arace has written up a simple CSS Crossfading example, demonstrated here. […]
Comment from brian
Time: September 21, 2006, 11:16 am
great tool. I need something that scrolls rather than fades, can’t quite figure it out, anyone got something using these same libraries.
Comment from CodeRed82
Time: September 21, 2006, 12:21 pm
Works well in Opera 9. Good job!
Pingback from Born to Click » Une brouette de liens Web Design
Time: September 21, 2006, 1:54 pm
[…] Intéressant Crossfader en CSS/javascript pour créer des diaporamas. […]
Comment from Peter Flaschner
Time: September 21, 2006, 2:55 pm
Very nice work!
Comment from ImagicDigital
Time: September 21, 2006, 8:30 pm
If you don’t want to use scriptaculous you could try Adobe’s Spry libraries… they just added a nice fade effect.
Pingback from Skylog » Blog Archive » links for 2006-09-22
Time: September 22, 2006, 2:21 am
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: javascript) […]
Pingback from CSS Crossfading « MrGierer’s World
Time: September 22, 2006, 4:06 am
[…] Crossfading with CSS - a nice effect based on Scriptaculous (see the demo). […]
Comment from jimy
Time: September 22, 2006, 12:03 pm
Great script, Mike. Tnx u, i m going to try it for my blog (:
Comment from dustlonely
Time: September 22, 2006, 2:50 pm
do you know how to do this in wordpress ? if you know, can you please send me an e-mail with the instruction. many thanks:)
Pingback from Fundidos con CSS y Javascript - Crossfading - Estudio de Diseño web, diseño corporativo, editorial y publicitario en Ronda, Málaga - Tesauro Comunicación
Time: September 22, 2006, 4:04 pm
[…] Por otro lado, Mike Arace ha escrito un ejemplo de Crossfading de CSS simple, demostrado aquí. En esta demo en particular, se presenta un efecto de fundido usando Script.aculo.us, una librería de efectos de Javascript. El código ocupa unos 170KB, casi 9 veces de lo que ocupa el anterior! Las instrucciones para realizar este efecto está aquí. El ejemplo del fundido puede encontrarse aquí. […]
Comment from Bogdan
Time: September 22, 2006, 4:31 pm
To grateful degrade the JS you could also let all the divs visible by not making them display: none in CSS, but add this rule through JS by changing the style.display value of the $(”box-2″) and $(”box-3″).
More than that, instead of using the onload non-standard attribute for body, you should call the function in JS using Event.observe(window, ‘load’, startPage, false);.
Comment from mike
Time: September 22, 2006, 5:35 pm
As many people have noted, you can make this display all of the DIVs in a non-javascript browser by simply removing the “display: none;” from the code itself and instead do it via javascript when the page loads. In non-js browsers this script can’t run, so they will all remain visible. In JS browsers, you may notice a slight flicker as the page loads then quickly hides those DIVs.
The reason I didn’t do this in my code is a) the flicker and b) the layout I initially created it for has a fixed height in which to display the DIVs, as I imagine most flash-replacement scenarios have. Instead, that site included little tab links to alternate between the images so that non-js users could still navigate and see each of the product’ benefits.
Comment from Nathaniel Brown
Time: September 23, 2006, 5:18 am
You could have the parent div a fixed height with the overflow as hidden, and when the javascript loads, it will remove the overflow style and properly show the next element while hiding the others.
Best of both worlds :)
Pingback from smolinari.com: blogs and articles collection » A CSS Crossfader Demo
Time: September 25, 2006, 3:49 am
[…] [more] […]
Comment from Groningen
Time: September 26, 2006, 3:37 am
Great simple script that can be used for a whide range solutions
so thanx!
Pingback from 棺材中的尘埃 » 最近再测试crossfader的效果。。始终失败
Time: September 26, 2006, 9:19 pm
[…] To read the related blog article describing this page, click here. […]
Comment from Jon Wright
Time: October 3, 2006, 11:32 am
Flash Killer Eh!!
Now that would be something :-)
Pingback from 20 Links JavaScript :: Napolux.com
Time: October 19, 2006, 7:19 am
[…] CSS Crossfader […]
Comment from Murtraza
Time: October 23, 2006, 2:38 pm
Can I use it as my email signature either hotmail or yahoo…
I copied your code in an html file but it didn’t worked, gives an error Object not defined (Effect)
Please reply me at e.murtaza@hotmail.com
Bye,
Murtaza
Comment from Michal
Time: October 25, 2006, 11:09 am
Well done!
Pingback from links for 2006-10-07 at willkoca
Time: October 31, 2006, 6:30 pm
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: CSS javascript scriptaculous prototype) […]
Comment from Dave
Time: November 8, 2006, 6:50 am
It’s very nice, but using absolute positioning is a pain: I like to write fluid html that resizes to fit the browser window, and I think as more people view web content on anything from the telly to palmtops it’s increasingly important to work this way.
Pingback from WeLearn » CSS Crossfader
Time: November 11, 2006, 1:31 am
[…] […]
Pingback from leonardofaria.net // weblab // webstandards, flash, webdesign e macintosh
Time: November 13, 2006, 1:17 pm
[…] 1) Galeria de imagem - Efeitos suaves e bem feitos 2) Reflector - Imagens com reflexos (muito usado no site da Apple) 3) Newsticker - Newsticker no-obstrusivo 4) Auto-Completer - Estilo Google Suggest 5) Auto-Completer - Demo do wiki do script.aculo.us 6) Slideshow 7) Outro Slideshow 8) Outro Newsticker 9) Tooltip 10) Efeito Carrosel 11) Carrinho de compras - Nada que se compara a loja virtual da Panic 12) Select box replacement - Vindo dos hermanos Technorati Tags: script.aculo.us, frameworks, prototype, web2.0, javascript […]
Comment from argus
Time: February 20, 2007, 1:12 am
nice effect!!
very thx~ & scrap to my blog.
Comment from Brian
Time: February 22, 2007, 10:18 am
Has anyone been able to get two instances of this working on the same page, I duplicated the JS code and changed the variables around but every time it seems to mess up.
Anyone have any ideas?
Thanks
Brian
Comment from lifeguru
Time: February 27, 2007, 12:17 am
Works just great for my blog, thank you Mike :)
Comment from Dekoration
Time: March 6, 2007, 6:34 pm
Sorry for the troll, but scriptaculous is not browser-agnostic. I doesn’t even degrade nicely on IE 5.0 (thorws js errors).
We’d better follow Dustin Diaz’s advice :)
Comment from Andre
Time: March 26, 2007, 9:34 am
WOW! Great effect! Thanks a lot!
Pingback from Jason Bartholme’s SEO Blog » Blog Archive » 101 CSS Resources to Add to Your Toolbelt of Awesomeness
Time: April 2, 2007, 9:07 pm
[…] A CSS Crossfader Demo - mikeomatic.net […]
Pingback from » 25 Code Snippets for Web Designers (Part3)
Time: April 12, 2007, 9:49 am
[…] CSS Cross Fader - In this particular demo, I am going to show how to build a browser-agnostic crossfading effect using Script.aculo.us, a Javascript effects library […]
Pingback from CSS Crossfade « Geekdoagrest
Time: April 19, 2007, 7:38 am
[…] Artigo: http://mikeomatic.net/?p=78 Demo: http://mikeomatic.net/techtips/css-crossfader/ […]
Comment from paul
Time: April 20, 2007, 11:37 am
works great, except in IE6, where it flickers as the fade is occurring between images. Any ideas? Now the images I’mfading are background images for tags…because i have them change images on rollover. Again, works great in IE7 and Firefox….any ideas?
Comment from Scott
Time: May 1, 2007, 2:05 pm
I’m using the script from this page to switch images ever 10 seconds. Does anyone know if there is a way to randomly vary witch image loads 1st. So each time the page loads a dif image is displayed 1st. I’m thinking somthing having to do with.
var divs_to_fade = new Array(’box-1′, ‘box-2′, ‘box-3′, ‘box-4′);
but i don’t know java script at all realy so i can’t figure it.
Comment from Xaver
Time: May 18, 2007, 4:22 am
Works great in browsers:
Opera 9.2
FF 1.5
FF 2.0
IE 6
IE 7
on IE 5.5 their is no transition effect, but text changes too.
Pingback from michaelmuller.net | Diseño y Desarrollo Web » Código útil para tus proyectos! (Parte 1)
Time: May 23, 2007, 2:28 pm
[…] Web: http://mikeomatic.net/ | Demo […]
Comment from dhostetler
Time: May 25, 2007, 5:17 pm
awesome!
simple.
elegant.
effective.
Comment from HT
Time: June 1, 2007, 1:24 am
FYI, tried adapting this to do simultaneous cross fades on same intervals for two different divs, works very well on IE 6 / IE7 but seems to “skip” through every other div in a very strange manner.
e.g. Div1 > quickly fade thru Div2 > normal speed into Div3 > quickly fade thru Div1 > normal speed into Div2. Very odd!
Comment from M. Flyer
Time: July 5, 2007, 10:50 am
IT WORKS! Thank you very much….
Greetz from Germany
Pingback from 101 взрывной и незаменимый информационный ресурс по CSS » Блог проекта W3School.ru - школы создания сайтов
Time: July 17, 2007, 4:09 am
[…] A CSS Crossfader Demo - mikeomatic.net […]
Comment from bandung
Time: July 21, 2007, 7:12 pm
nice effect..
Comment from Alex
Time: August 24, 2007, 11:00 am
Very nice effect, cool
Comment from Sava
Time: September 20, 2007, 6:37 am
It helped me so much. Thanks!
Comment from John
Time: September 22, 2007, 8:18 am
I’ve been thinking of coding something like this but I do not have to now. Thanks
Comment from Megan
Time: September 23, 2007, 6:15 pm
Tnx for the effect. I’ll use it for my website!
Comment from Amber
Time: September 26, 2007, 10:52 am
Nice soft. It worked fine for me.
Comment from Alexy
Time: September 27, 2007, 2:42 pm
TNX! Very nice, but doesn’t work correct in IE 5.5
Comment from Grow
Time: October 6, 2007, 5:14 pm
Nice works fine in all browsers, thx
Comment from Jonny
Time: October 6, 2007, 5:48 pm
awesome effect! thank a lot!
Pingback from 101 recursos CSS
Time: October 10, 2007, 3:43 pm
[…] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com 15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org 53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com A CSS Crossfader Demo - mikeomatic.net Attach icons to anything with CSS - hunlock.com Beginner’s guide from a seasoned CSS designer - cameronmoll.com CSS Advisor beta adobe.com CSS Image Text Wrap Tutorial - bigbaer.com CSS Navigation Techniques (37 entries) - alvit.de CSS techniques I use all the time - christianmontoya.com CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com CSS tips and tricks - blogherald.com CSS: Getting Into Good Coding Habits - communitymx.com Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com Everything You Need to Know About CSS3 - css3.info Little Boxes - thenoodleincident.com Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com Max Design - Sample CSS Page Layouts - maxdesign.com.au My 5 CSS Tips - businesslogs.com Playing Nice with the Other CSS Kids - contentwithstyle.co.uk Showing Hyperlink Cues with CSS - askthecssguy.com Squeaky Clean CSS - huddletogether.com Ten CSS tricks you may not know - webcredible.co.uk Ten more CSS tricks you may not know - webcredible.co.uk Three Column Layouts - css-discuss - css-discuss.incutio.com Turning a list into a navigation bar - 456bereastreet.com Turning Lists into Trees - odyniec.net Unordered List Rollover Gallery - destinedtodesign.com Web Page Reconstruction with CSS - digital-web.com Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com […]
Comment from Suiziva
Time: November 29, 2007, 4:43 pm
The Author, you - genius…
http://danuegonax.com
I wish you health!
Comment from Suiziva
Time: November 30, 2007, 8:40 am
Very good contents…
http://srubibablo.com
Forgive that beside You was little ed!
Comment from Suiziva
Time: December 19, 2007, 7:38 am
Very good web forum, great work and thank you for your service.
http://unikont.com
I simply mad about this forum!
Comment from Counter Strike
Time: January 8, 2008, 5:23 pm
Thanks for the many informations and good contents
Pingback from 101 CSS resources | ARTEgami in English
Time: January 16, 2008, 9:21 pm
[…] 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com 15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org 53 CSS-Techniques You Couldn’t Live Without - smashingmagazine.com A CSS Crossfader Demo - mikeomatic.net Attach icons to anything with CSS - hunlock.com Beginner’s guide from a seasoned CSS designer - cameronmoll.com CSS Advisor beta adobe.com CSS Image Text Wrap Tutorial - bigbaer.com CSS Navigation Techniques (37 entries) - alvit.de CSS techniques I use all the time - christianmontoya.com CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com CSS tips and tricks - blogherald.com CSS: Getting Into Good Coding Habits - communitymx.com Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com Everything You Need to Know About CSS3 - css3.info Little Boxes - thenoodleincident.com Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com Max Design - Sample CSS Page Layouts - maxdesign.com.au My 5 CSS Tips - businesslogs.com Playing Nice with the Other CSS Kids - contentwithstyle.co.uk Showing Hyperlink Cues with CSS - askthecssguy.com Squeaky Clean CSS - huddletogether.com Ten CSS tricks you may not know - webcredible.co.uk Ten more CSS tricks you may not know - webcredible.co.uk Three Column Layouts - css-discuss - css-discuss.incutio.com Turning a list into a navigation bar - 456bereastreet.com Turning Lists into Trees - odyniec.net Unordered List Rollover Gallery - destinedtodesign.com Web Page Reconstruction with CSS - digital-web.com Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com […]
Pingback from betohayasida.net » Blog Archive » links for 2008-01-22
Time: January 22, 2008, 7:33 pm
[…] Mike-O-Matic » A CSS Crossfader Demo (tags: ajax css) […]
Comment from Selina 18
Time: January 29, 2008, 1:01 pm
Nice demo! I thought it’s unavailable without java or flash!
Pingback from http://mikeomatic.net/?p=78
Time: March 16, 2008, 4:26 pm
[…] http://mikeomatic.net/?p=78 […]
Pingback from 125 Code Snippets for web designers | PaulSpoerry.com
Time: April 1, 2008, 5:39 pm
[…] […]
Comment from Sean Morrison
Time: April 2, 2008, 8:15 pm
I found another way around the IE text shift problem, simply set the starting opactiy to 99 percent for your fade-box. This way when the opacity changes we don’t get a text shift from the browser’s alpha filter:
opacity: .99;
filter: alpha(opacity=99);
Comment from nVonatiQ
Time: April 16, 2008, 4:32 am
Very great Blog! Thanks for all the really usefully Informations.
Pingback from 20 Top Script.aculo.us Scripts you can’t live without | Speckyboy - Wordpress and Design
Time: April 26, 2008, 3:10 pm
[…] 8. A CSS Crossfader […]
Pingback from 三分鱼 » 10款不错的javascript
Time: May 9, 2008, 11:10 pm
[…] 8. A CSS Crossfader 演示地址 […]
Comment from Ana
Time: May 14, 2008, 3:15 pm
Didn’t know this was possible trough CSS. Thanks
Comment from Jarno
Time: May 14, 2008, 3:16 pm
Used this in a site for a custommer. Very helpfull. Thank you very much
Comment from Manuel
Time: May 22, 2008, 7:18 pm
Hi hello, I would like to know if your script crossfader is free to use for any kind of website or I need any kind of authorization from you for using it.
Manuel
Comment from Kato
Time: June 8, 2008, 11:06 am
Nice!,so Nice works thx !
I’ll use it for my website.
Comment from Gregory
Time: June 16, 2008, 5:53 am
Nice, but I need only the fading in-out effect, I’d like to have a JS smaller than 121Kb! Could you distribute your library also in “pieces”? (in case one need only one module)
Thanks
Pingback from 101 CSS Resources to Add to Your Toolbelt of Awesomeness
Time: July 12, 2008, 6:59 pm
[…] A CSS Crossfader Demo - mikeomatic.net […]
Pingback from A study in Ajax Web trends. What are the best Free Ajax Resources? (70 of the Best Ajax Resources). | Speckyboy - Wordpress and Design
Time: August 19, 2008, 4:59 am
[…] 9. A CSS Crossfader […]
Pingback from 70 of the Best Ajax Resources -
Time: October 6, 2008, 9:01 am
[…] 9. A CSS Crossfader […]
Comment from cicurug
Time: November 5, 2008, 3:16 am
great info
blog.cicurug.com
Pingback from 101 Awesome CSS Resources :
Time: November 22, 2008, 11:44 am
[…] CSS Tips and Techniques - 10 CSS Tips from a Professional CSS Front-End Architect - 72dpiintheshade.com - 15 CSS Properties You Probably Never Use (but perhaps should) - seomoz.org - 53 CSS-Techniques You Couldna€™t Live Without - smashingmagazine.com - A CSS Crossfader Demo - mikeomatic.net - Attach icons to anything with CSS - hunlock.com - Beginner’s guide from a seasoned CSS designer - cameronmoll.com - CSS Advisor beta adobe.com - CSS Image Text Wrap Tutorial - bigbaer.com - CSS Navigation Techniques (37 entries) - alvit.de - CSS techniques I use all the time - christianmontoya.com - CSS Techniques Roundup - 20 CSS Tips and Tricks - petefreitag.com - CSS tips and tricks - blogherald.com - CSS: Getting Into Good Coding Habits - communitymx.com - Erratic Wisdom: 5 Tips for Organizing Your CSS - erraticwisdom.com - Everything You Need to Know About CSS3 - css3.info - Little Boxes - thenoodleincident.com - Master Stylesheet: The Most Useful CSS Technique - crucialwebhost.com - Max Design - Sample CSS Page Layouts - maxdesign.com.au - My 5 CSS Tips - businesslogs.com - Playing Nice with the Other CSS Kids - contentwithstyle.co.uk - Showing Hyperlink Cues with CSS - askthecssguy.com - Squeaky Clean CSS - huddletogether.com - Ten CSS tricks you may not know - webcredible.co.uk - Ten more CSS tricks you may not know - webcredible.co.uk - Three Column Layouts - css-discuss - css-discuss.incutio.com - Turning a list into a navigation bar - 456bereastreet.com - Turning Lists into Trees - odyniec.net - Unordered List Rollover Gallery - destinedtodesign.com - Web Page Reconstruction with CSS - digital-web.com - Yahoo! UI Library: Grids CSS - com1.devnet.scd.yahoo.com […]
Pingback from BOTLOG - Блог для прогрессивно мыслящих людей » Blog Archive » div — это модно!
Time: November 30, 2008, 12:31 am
[…] A CSS Crossfader Demo - mikeomatic.net […]
Pingback from 60+ Stunning Scriptaculous Applications
Time: January 20, 2009, 4:05 pm
[…] A CSS Crossfader - mikeomatic.net […]
Comment from softwaredevelopment
Time: February 9, 2009, 10:19 pm
nice site!! Create cross fading content boxes using HTML and JavaScript. No need for heavy Flash! thumbs up on su!!
Comment from Mark
Time: March 4, 2009, 3:40 am
Really nice code you’ve made. I’ll implement it
Comment from Mira
Time: March 20, 2009, 12:59 am
To grateful degrade the JS you could also let all the divs visible by not making them display: none in CSS, but add this rule through JS by changing the style.display value of the $(”box-2″) and $(”box-3″).
More than that, instead of using the onload non-standard attribute for body, you should call the function in JS using Event.observe(window, ‘load’, startPage, false);.
Pingback from CSS Resources | csstemplatesdesign
Time: March 24, 2009, 3:02 pm
[…] A CSS Crossfader Demo - mikeomatic.net […]
Pingback from 101 взрывной и незаменимый информационный ресурс по CSS / Блог для web-мастеров
Time: April 23, 2009, 6:03 pm
[…] A CSS Crossfader Demo - mikeomatic.net […]
Pingback from CSS Tips and Techniques | ThinkCreateInspire
Time: June 19, 2009, 1:30 am
[…] A CSS Crossfader Demo – mikeomatic.net […]
Comment from Alex
Time: June 30, 2009, 4:08 am
nice nice, bookmarked
Comment from mobil surfen
Time: July 16, 2009, 1:26 pm
Nice trick! I will test it out.
Comment from Denver
Time: August 18, 2009, 8:29 am
Статья интересная, добавлю в избранное для дальнейшего ознакомления
Pingback from 250+ Resources to Help You Become a CSS Expert - MixTech
Time: August 18, 2009, 10:28 pm
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Pingback from Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net
Time: August 19, 2009, 3:17 am
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Pingback from 250+ Resources to Help You Become a CSS Expert | X Design Blog
Time: August 19, 2009, 2:46 pm
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Pingback from 250+ Resources to Help You Become a CSS Expert | huibit05.com
Time: August 20, 2009, 9:54 am
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Pingback from Recursos CSS
Time: August 26, 2009, 8:31 am
[…] 10 CSS Tips from a Professional CSS Front-End Architect 15 CSS Properties You Probably Never UseA CSS Crossfader Demo Attach icons to anything with CSS Beginner’s guide from a seasoned CSS designer CSS Advisor beta CSS Image Text Wrap Tutorial CSS Navigation Techniques (37 entries) CSS techniques I use all the time CSS Techniques Roundup – 20 CSS Tips and Tricks CSS tips and tricks CSS: Getting Into Good Coding Habits Erratic Wisdom: 5 Tips for Organizing Your CSS Little Boxes Master Stylesheet: The Most Useful CSS Technique Max Design – Sample CSS Page Layouts My 5 CSS Tips Playing Nice with the Other CSS Kids Showing Hyperlink Cues with CSS Squeaky Clean CSS Ten CSS tricks you may not know Three Column Layouts – css-discuss Turning a list into a navigation bar Turning Lists into Trees Unordered List Rollover Gallery Web Page Reconstruction with CSS Yahoo! UI Library: Grids CSS […]
Pingback from 20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource
Time: September 8, 2009, 8:58 pm
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Comment from Lubertus
Time: September 14, 2009, 5:29 pm
Вы абсолютно правы. В этом что-то есть и идея отличная, поддерживаю.
Comment from Diktionarynet
Time: September 16, 2009, 4:21 pm
Автор явно умеет привлечь посетителей на сайт). Пишет очень понятно и интересно. Огромное человеческое спасибо
Comment from sloreali
Time: September 21, 2009, 3:41 pm
Почитала очень много интересных мнений. Многих поддерживаю
Comment from Rechtsanwalt
Time: September 25, 2009, 9:29 am
Дабы углубится в саму суть материала, добавил RSS и в избранное. Буду внимательно изучать
Comment from Antiraiders
Time: September 25, 2009, 4:30 pm
Прочитал все комментарии, но так и не понял почему так сильно расходятся мнения, помоему и так всё понятно
Comment from rankona
Time: September 30, 2009, 1:34 am
Почитал. Как говорится, сколько людей, столько мнений. Не соглашусь ни с одними, ни с другими
Comment from Pseugsesoff
Time: October 14, 2009, 8:02 pm
где-то еще встречал инфу по теме, никто не знает где?
Comment from John14
Time: October 22, 2009, 7:06 pm
But it’s not clear that people understand what it means. ,
Pingback from Become a CSS Expert, 250+ Resources | Amazing and Inspiring Design
Time: October 29, 2009, 3:36 pm
[…] A CSS Crossfader Demo – This shows how to make a really cool crossfading effect using Script.aculo.us, JavaScript and CSS. […]
Comment from Ashu
Time: November 5, 2009, 10:36 am
Great job, Using it at resourzing.com, a free online automated way of collecting and managing your professional references and letters of recommendations
Comment from forex
Time: November 24, 2009, 3:05 am
yes good one!
Comment from Chevrolet
Time: December 6, 2009, 3:09 pm
Great work. Thanks.
Comment from Gadgets
Time: December 8, 2009, 2:54 pm
Thanks for the article. The blog was very helpful.
Comment from Геодезия
Time: December 12, 2009, 4:33 pm
Cool site mate!
Comment from Map
Time: December 18, 2009, 5:06 pm
Thank you site good nice post much.
Comment from gis
Time: December 22, 2009, 6:07 am
I like your website, I will share this with friends
Pingback from 250+资源帮助你成为一个CSS专家 - 唯创网站设计博客
Time: December 25, 2009, 4:22 am
[…] CSS从根本上 -这是一个非常基本的入门教程使用CSS，可以引导利用CSS创建你的第一个基本的网页你。它假定人经历的教程已经很少或根本没有如何编写一个网站，是一个很好的资源为初学者知识 53 CSS技巧你不能没有 -这是一个从菜单形式的一切CSS技巧收集大量打印样式表。 CSS阴影效果 -关于如何利用CSS创建图像阴影教程。 一个CSS推子演示 -这表明如何使一个很酷crossfading效果使用Script.aculo.us，JavaScript和CSS。 Selectutorial – CSS选择器 -基本指南CSS选择器以及它们如何工作。 导航技术的CSS -对37种不同的导航设计，收集使用CSS 附加任何图标与CSS -演示如何使用CSS选择器添加一个图标，任何HTML位。 CSS技巧我使用所有的时间 -对CSS技巧收集基督教蒙托亚认为极有价值。 CSS技巧综述- 20的CSS技巧和窍门 -阿的CSS技巧，包括圆角和CSS弹出式集合。 的CSS技巧和窍门 -一个有用的，基本的CSS技术的集合。 主样式：最有用的CSS技术 -一个主样式表用于结算和重置浏览器默认值 样本的CSS页面布局 -收集的一步一步布局教程。 用CSS显示超链接线索 -快速教程添加链接图标式使用CSS，而且与7，Safari浏览器兼容，和Firefox。 十的CSS技巧你可能不知道 -涉及范围包括CSS字体速记技巧，图片替换，并与CSS垂直对齐方式。 十多个CSS技巧你可能不知道 -本文介绍像块与内联元素外，设立最低页面宽度，和隐形文字。 转变成一个导航栏一名单 -关于建立一个从样式列表导航条伟大的教程 至于名单进入树林 -如何建立多层次的文件或网页树的形式无序列表。 无序列表翻转画廊 -如何创建一个图像廊使用无序列表和过渡技术。 网页重建与CSS -如何重建一个CSS布局网页。 高级CSS布局：分步 -阿一步一步如何建立一个先进的3列布局。 从头开始创建一个CSS布局 -一个完整的指南，以建立一个基于CSS的站点从头开始 表格标记和CSS -形成一个指导，用CSS样式。 CSS教程 -一个完整的W3Schools教程。 样式表 -另一个非常完整的CSS教程集合。 花式段落的CSS -的教学开辟专门的段落格式。 更用CSS角圆角 -为创造这种支持PNG和阿尔法透明圆角技术 单幅图像多替换 -一个技术，它使用一个单一的形象，以取代多个标题。 缩略图链接 -建立一个链接弹出预览使用JavaScript和CSS教程。 Uberlink的CSS菜单列表 -为建立一个导航条，其行为就像一个交换菜单上的形象，但只使用了两个图像，并强调当前页教程。 Iconize Textlinks用CSS -一个添加文件类型和其他图标，您的链接技术。 如何添加变量到你的CSS文件 -对申请变量的CSS使用PHP和Apache的URL重写指南 15 +技术和工具，跨浏览器的CSS编码 -本文介绍超过15个创建跨浏览器兼容的CSS代码的技巧。 CSS切片指南 -一个完整的切片教程设计文件创建符合标准的CSS和XHTML网站。 围绕的CSS -乐趣无穷！ -一个到CSS指导中心的布局，包括围绕液体布局。 内绝对定位相对定位 -一个绝对在一个相对定位的父元素的指导，定位子元素。 学习CSS定位在10个步骤 -一个方便的教程，教你的经常混淆CSS定位的基本知识 山顶角 -建立与CSS圆角。 的CSS圆角综述 -以圆角技术和教程的集合。 乐趣与形状的CSS -甲截屏显示如何创建形状只使用CSS（没有图像）。 不引人注目Sidenotes -内建立一个网页显眼sidenotes技术。 自定义的CSS技巧子弹 -以建立与子弹自定义的CSS样式指南 的CSS赃物：多列列表 -以建立语义指导，合理，有序列表，通过多个垂直列包装。 改进打印连结显示 -显示如何将其纳入后锚文本链接在您的网页打印链接的网址。 先进的CSS菜单计谋 -一个非常酷的一个先进的菜单用CSS建立模糊效果。 CSS菜单 -关于建立从CSS2中，没有JavaScript的嵌套列表菜单教程。 标签的CSS的下拉菜单 -为创建一个下拉菜单标签的CSS教程 高级的CSS菜单 -为建立一个真正伟大的CSS从WebDesignerWall菜单教程。 动画水平标签 -一个用于创建水平的菜单选项卡教程，动画的过渡。 图形菜单的CSS与变换图像 -一个伟大创造一个有滚动效果的CSS菜单教程。 雪碧导航的CSS教程 -创建一个使用CSS菜单精灵教程。 混合的CSS下拉 -关于如何创建CSS，这是适度地降低和结构良好，除其他外下拉教程 CSS菜单2版 -创建一个动态菜单使用CSS和jQuery是跨浏览器兼容。 初学者指南的CSS -一个完整的指南，为这些新来的CSS。 用CSS入门：一次实战演练 -一个非常基本的指南开始使用的CSS。 4尤伯杯酷为链接的CSS技术 -一个伟大的链接集合造型技术。 8高级一线的CSS技巧 -一个单行的CSS解决方案集合，包括垂直中心，防止连接线中断，积极联系并消除边界 如何：大背景的CSS -一个与大背景工作的CSS教程。 高度可扩展的CSS接口 -一个完整的用于创建高度可定制，适应能力强的CSS网站教程。 使用CSS做任何事情：50 +创新的例子和教程 -创造一个独特的CSS布局收集超过50教程。 方便快捷的CSS与Firebug的发展 -对使用Firebug，以改善您的网站设计指南。 10例子：一个优美的CSS排版和他们怎么做… -提供了很大的CSS排版的例子以及如何创建每个教程 16可用的CSS图和条形图教程和技术 -一种用于创建的CSS教程收集的图表和数据可视化图形。 更好的拉行情：不要重复标记 -建立一个指导，重要引述，不包含任何不必要的，重复的标记。 梯度文字效果的CSS -建立一个为您的标题文字梯度教程。 拉行情的CSS -另一个拉与CSS创建引号教程。 创建CSS布局：对私营部门的最佳转换到XHTML教程 -一个从Photoshop创建的CSS设计收集教程 20终极的CSS教程，将帮助您掌握的CSS -二十个容易理解创建棘手的CSS效果教程伟大的收集。 19日的CSS菜单教程的香料最多您的网页设计 -提供一些伟大的菜单选项，为每个指令。 43私营部门司XHTML的CSS教程创建Web布局和导航 -大量的教程列表变成有效的CSS您的Photoshop设计/ XHTML文件。CSS图像映射 -一个利用CSS和XHTML图像映射教程。 流体网格 -以建立流体基于网格的布局指南 如何调试的CSS -对调试CSS技巧教程。 九顶，每个网页设计师的基本技能应学习 -集合的必知道的CSS技术，包括建立CSS布局和基本知识的风格形式。 10具有挑战性，但真棒CSS技巧 -对一些先进的CSS技术，有良好的值得学习的指南。 50 +尼斯清洁的CSS Tab键导航的脚本 -一个伟大的收集标签导航使用CSS。 30特殊的CSS技巧与实例 -一个非常酷的CSS效果伟大的收集，包括hoverbox图像画廊，一个棘手的页脚和一个CSS只，手风琴等作用 101 CSS技巧的所有时间第1部分 – 第2部分 -另一个出色的CSS教程为每个技术有什么大的集合。 死中心 -关于如何定位在一个浏览器窗口中心的东西（纵向和横向）简短的教程。 液态布局的简单方法 -关于建立液体CSS布局完整的教程。 彩色盒，其中建筑全部CSS布局方法 -伟大的一步一步如何建立一个覆盖从根本上CSS布局的方法 模板和框架该网格的CSS 1千字节 -这可能是最简单，最小巧的网格系统在那里，但包括自定义的工具网格之前，下载Layouts.IronMyers.com -对布局（包括液体）的各种宽度，可收集。 CSS禅意花园 – CSS禅意花园是一个HTML和CSS框架内作出向人们展示了可以创建使用CSS设计的要求。除了框架，也有可用的模板和主题吨。 布局水库 -一些简单的CSS布局。 完善多列液体的CSS布局 -液态布局的集合，这些iPhone兼容。 960网格系统 -一个CSS网格系统基于一个960像素宽的基本布局 在960查询详细的CSS框架 -一个综合网站，网站建设的960个网格系统。 流体网格系统960 创建于960网格系统为基础，12或16列流体布局-模板。它还包括固定模板布局。 蓝图的CSS -建立一个网格的CSS框架为基础的设计。 BlueprintCSS 101 -基本指南使用蓝图框架。 CSS样板 -一个简单的，语义的CSS框架 YAML的 -然而，另一个多列布局。基于标准的XHTML / CSS框架。 Ruthsarian布局 -该网站提供了一系列的CSS的布局是免版税的，无版权。 布局晚会 -该网站提供了40不同的CSS风格的HTML模板创建的各种不同的网站布局。 动态驱动器CSS布局 -另一个网站提供一些基本的CSS模板2和3列，液体和固定布局。 免费的CSS模板 -一个网站，提供超过200下发布的CSS模板的知识共享署名2.5许可 尼斯和免费的CSS模板 -十几个模板，让您开始使用基于CSS的设计，包括一个动态的中心中，4动态列，和固定箱总中心的设计。 开放式设计 -对自由的CSS和XHTML数以千计的模板收集来自世界各地的。 易燃物的CSS框架 -的CSS易燃物提供了出色的CSS框架吨，包括一些WordPress的框架，固定和灵活的模板，甚至完全的开源主题。 只有你需要的CSS布局 -该网站提供了10种不同的CSS布局模板都是基于相同的HTML。 小盒子 -一个为收集各种布局的CSS文件 三栏布局 -收集的3列布局的来自全国各地的网站。 疯狂的CSS -一个CSS画廊的已有5年左右。 CSSelite.com -一个CSS的设计的分类库。 的CSS霜 -以彩色，类别或设计，其中还包括辅导和新闻网站的排序巨大的画廊。 csswebsite -画廊，让您按类别，日期或彩色滤光片。 CSS -一个CSS设计画廊按行业排序 仿栏CSS布局 -一个42集的固定列的宽度与仿CSS布局。 布局包 -一组液体宽度CSS布局框架（它的网页上的第三次下载）。 原型与网格960的CSS框架 -以建立网格960使用指南网站实体模型。 原型一杂志风格的蓝图的CSS框架主页模板 -建立一个杂志和网格非常宝贵的指导与蓝图型布局 CSSEasy.com -一个基本的CSS布局的集合，包括固定和流动的选择。 的黎波里 -一个普通的CSS标准的复位和稳定，重建跨浏览器的标准浏览器的现场呈现。 BlueTrip产品的CSS框架 -一个CSS框架，声称要结合蓝图，的黎波里，Hartija，960网格系统，和元素的最佳方面。 弹性的CSS框架 -为简化弹性，固定，或液体布局建立框架。 SenCSs -一个框架，侧重于创造你的CSS样式重复部分明智的 内容与风格 -更先进的CSS框架，其中包括预先编写和测试组件。 Typogridphy -网格的框架基础上，960个网格系统的建立印刷上满意的电网布局。 金网格 -另一种基于网格的CSS布局框架的基础上6月12日网格系统和一个970像素的主宽度。 元素的CSS框架 -一个轻量级的，易于使用的CSS框架。 […]
Comment from Нетбук
Time: January 18, 2010, 12:41 pm
Accidentally came across your website. Great resources. Thanks.
Write a comment