+ Reply to Thread
Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jun 2004
    Posts
    178

    How to make an image transition using CSS?

    Hi

    I want to make an image in a DIV morph into another (in the same DIV) and then back again every ten or 20 seconds, but I want the transition to be smooth. . I was wondering if there is a simple CSS way of doing this, rather than making an animated gif with stacks of frames?

    Cheers

    Shaun
    I'm looking for a male vocalist to work with. Go to http://people.aapt.net.au/celebritymusic/s...ikingsmith.html to email me

  2. #2
    Super F@D Folder
    Join Date
    Jun 2004
    Posts
    5,093
    nope. you'll be needing an animated gif there. sorry

  3. #3
    Banned Iturea's Avatar
    Join Date
    Jan 2004
    Location
    Earth
    Posts
    420

    Wink

    Quote Originally Posted by celebritymusic View Post
    Hi

    I want to make an image in a DIV morph into another (in the same DIV) and then back again every ten or 20 seconds, but I want the transition to be smooth. . I was wondering if there is a simple CSS way of doing this, rather than making an animated gif with stacks of frames?

    Cheers

    Shaun
    revealTrans filter allows you to transition between images. This should get you started. Adding a timer, etc will give you the effect of the 20
    second pause you are looking for. If I had more time I would have
    thrown in the timer logic as well.

    This may only work in IE. Don't know, don't care... LOL! Copy, paste, make better... GOOD LUCK!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>  
        <title>
          revealTrans
        </title>
          <script type="text/javascript" xml:space="preserve">
           //<![CDATA[
            var transitionName = 
            ["Box In", "Box Out", 
             "Circle In", "Circle Out",
             "Wipe Up", "Wipe Down"];
     
             var counter = 0;
             var whichImage = true;
     
             function blend()
             {
               if (whichImage) {
                   image1.filters( "revealTrans" ).apply();
                   image1.style.visibility = "hidden";
                   image1.filters( "revealTrans" ).play();
                 }
                 else {
                   image2.filters( "revealTrans" ).apply();
                   image2.style.visibility = "hidden";
                   image2.filters( "revealTrans" ).play();
                 }
             }
     
             function reBlend( fromImage )
             {
               counter++;
     
                 if (fromImage) {
                   image1.style.zIndex -= 2;
                   image1.style.visibility = "visible";
                   image2.filters( "revealTrans" ).transition = counter % 6;
                 }
                 else {
                   image1.style.zIndex += 2;
                   image2.style.visibility = "visible";
                   image1.filters( "revealTrans" ).transition = counter % 6;
                 }
     
                 whichImage = !whichImage;
                 blend();
                 transitionDisplay.innerHTML = "Transition " + 
                 counter % 6 + ": " + transitionName[ counter % 6 ];
             }
           //]]>
          </script>
      </head>
      <body onload="blend();">
        <img id="image2" src="http://images.techimo.com/timo_images/images/logo.gif" 
             style="position: absolute; left: 10px; top: 10px; width: 246px; 
             z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)" 
             onfilterchange="reBlend( false )" alt="" name="image2" /> 
        <img id="image1" src="http://images.resellerratings.com/images/rrlogo1124b.gif" 
             style="position: absolute; left: 10px; top: 10px; width: 246px; 
             z-index:1; visiblity: visible; filter: revealTrans(duration=2, transition=0)" 
             onfilterchange="reBlend( true )" alt="" name="image1" />
        <div id="transitionDisplay" style="position: absolute; top: 70px; left: 80px;">
          Transition 0: Box In
        </div>
      </body>
    </html>
    Last edited by Iturea; March 8th, 2007 at 03:42 PM.

Quick Reply Quick Reply

If you are already a member, please login above.

What is the color of the sky?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. How to make a DIV rest at the bottom of another DIV in CSS?
    By celebritymusic in forum Webmastering and Programming
    Replies: 1
    Last Post: March 1st, 2007, 10:15 AM
  2. Unable to figure out how to make a ISO image for a bootable CD
    By videobruce in forum Applications and Operating Systems
    Replies: 1
    Last Post: August 1st, 2006, 09:54 AM
  3. Help..make image file from directory/files
    By atlboi in forum Applications and Operating Systems
    Replies: 1
    Last Post: October 21st, 2005, 02:20 PM
  4. css linking background image?
    By ClubMed in forum Webmastering and Programming
    Replies: 4
    Last Post: January 7th, 2005, 10:05 AM
  5. can't make an image of a CD? help please...
    By zskillz in forum Technical Support
    Replies: 6
    Last Post: May 23rd, 2004, 02:42 AM

Posting Permissions

  • You may post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Copyright 2014 All Enthusiast, Inc