Image crossfade with javascript?

JavaScript
1

Greetings,

I’ve just stumbled upon a pretty cool image slideshow crossfade technique at the top of that page, and after inspecting the source code i see where all the images are called. They are simply within a div with a class of “feature-image”. There’s also a header and paragraph of text nested within the div to give that translucent area with a link to each particular article.

I noticed up in the head section of the page there are links to 3 different javascript libraries (prototype.lite, moo.fx, and core) but i’m prettty new to javascript and wondering if any of the more advanced users had seen this type of crossfade before? Wondering if it’s a part of mootools or prototype or where I might find something like this that I could apply in a similar fashion?

Thanks for any starting points! I’m happy to study or follow a tutorial if someone knows where to begin.

Many thanks,
Pedro

2

If it’s already using moo fx, simply go look at the Moo documentation http://docs.mootools.net/

If you’re new to JavaScript, it sounds like tackling a image slideshow is a steep place to start.

To do animation with YUI (what I’m generally familiar with) - it’s simple.


<script src="yahoo-dom-event.js"></script>
<script src="animation.js"></script>
.
.
.
<div id="example">
  Hello World
</div>
<div id="fade-in">
  Click Fade In
</div>
<div id="fade-out">
  Click Fade Out
</div>
<script>
  var fadeIn = new YAHOO.util.Anim('example', { opacity: { from: 0, to: 1 }});
  var fadeOut = new YAHOO.util.Anim('example', { opacity: { from: 1, to: 0 }});
  YAHOO.util.Event.on('fade-in', 'click', fadeIn.animate, fadeIn, true);
  YAHOO.util.Event.on('fade-out', 'click', fadeOut.animate, fadeOut, true);
</script>

Try it out. http://www.dustindiaz.com/basement/fade-in-out.html

This can easily be done as well with other libraries like jQuery, or Scriptaculous (an effects companion for Prototype), Mootools, Dojo. etc… the list goes on. Either way, I would definitely not recommend jumping into JavaScript animation without a library.

Cheers

3

here’s an example: http://dynamicdrive.com/dynamicindex2/fadescroll.htm

But I also would recommend that you start using a js framework in your daily work.
I recommedn prototype and scriptaculous. Here’s the crossfade done with these libraries:

4

I would generally recommend staying away from pretty much ‘anything’ on Dynamic Drive. Pretty much every script available on that site is a ‘one-off’. You’re very likely to run into errors and collisions when you start adding more behavior to your site.

5

Thank you very much for your ideas and experiential insight. While i was away from sitepoint for a few days, I also found this example which works with jquery.

Thanks again for the help!
Pedro