A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: How to do this image transition

  1. #1
    Senior Member
    Join Date
    Feb 2002
    Posts
    378

    How to do this image transition

    Hi,

    I am trying to replicate the image transition on this website:

    www.floorsofdistinction.com.au

    and I don't have a clue about html/css/etc.

    The source code for it (I think) is this:

    <div class="divider"><!-- &nbsp; --></div>

    <div class="container">
    <div id="content" class="clearfix">
    <div id="column-left">
    <div id="banner">
    <div id="slideshow">
    <img src="images/core/banner01.jpg" alt="Banner Image" />
    <img src="images/core/banner02.jpg" alt="Banner Image" />
    <img src="images/core/banner03.jpg" alt="Banner Image" />
    <img src="images/core/banner04.jpg" alt="Banner Image" />
    </div>
    </div>
    </div>

    Does anyone here know how to do this effect with the images fading over the top of each other. I am trying to create a website which has no flash in it.

    Cheers.

    WB

  2. #2
    Senior Member
    Join Date
    Aug 2009
    Location
    Scotland & England
    Posts
    117
    Without flash you would likely want to use jQuery.

    http://www.geeksucks.com/toolbox/23-...out-effect.htm

    Has some image fade stuff, I'm not that brilliant with jQuery, but most the time it just needs included into your page along with whatever you choose to use.

  3. #3
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    They are using jQuery, and this is the snippet of custom code for their slideshow:
    Code:
        //slideshow
    $('#slideshow').cycle({fx: 'fade', timeout: 5000, speed: 2000});

  4. #4
    Senior Member
    Join Date
    Feb 2002
    Posts
    378
    Thanks guys.

    I ended up using the jquery (two types)...

    ... one on the home page and one in the gallery.

    U can see it here www.functionandform.com.au

    Thanks again.

    WB

  5. #5
    Senior Member
    Join Date
    Aug 2009
    Location
    Scotland & England
    Posts
    117
    It looks good.

    However you have a small list circle at the bottom left of your pictures.

    Quick fix, in your CSS add: li {list-style-type:none;}

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center