SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image crossfade with javascript?

    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. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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. #3
    SitePoint Member
    Join Date
    May 2006
    Location
    Transylvania
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    http://ajaxian.com/archives/css-crossfading-example

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •