www.webdeveloper.com
Results 1 to 6 of 6

Thread: Simple Animation

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700

    Simple Animation

    Hi All,

    I'm not really strong on javascript, and I'm trying to get my head around the whole animation thing. What started out as seemingly simple is perhaps going to be a little more complicated than I thought.

    What I want to do is have 5 <div>s displayed in a fixed position on my page. The divs will contain text and pictures. Only one div is displayed at a time, and every 5 seconds, the next div slides over the top of the current div (from right to left) until it is completely obscured. At the conclusion of the fifth, it starts again with number 1.

    Can anyone point me to some code or a tutorial that will achieve this?

    Thanks
    CTB
    Oh Lord, please help me be the person my dog thinks I am.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    From your post I am not exactly sure what you want, but hopefully this is close.

    This code will continously slide 4 divs from left to right over a 'main' div .

    For testing I used 4 200px x 200px differently coloured divs.

    Hopefully you can use this as a template to get what you want.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title></title
    <
    style type="text/css"
    <!-- 
    #main { 
    overflowhidden
    border1px solid black
    colorblack;
    text-aligncenter;
    positionabsolutetop30pxleft50px
    background-colorwhite
    width200px
    height200px

    #div0 { 
    displayblock
    visibilityhidden
    positionabsolutetop300pxleft10px
    colorwhite;
    background-colorblack
    width200px
    height200px

    #div1 { 
    displayblock
    visibilityhidden
    positionabsolutetop300pxleft300px
    background-colorgreen
    width200px
    height200px

    #div2 { 
    displayblock
    visibilityhidden
    positionabsolutetop50pxleft300px
    background-colorred
    width200px
    height200px

    #div3 { 
    displayblock
    visibilityhidden
    positionabsolutetop300pxleft600px
    background-colorblue
    width200px
    height200px

    #btnContainer { 
    positionabsolutetop250pxleft70px
    --> 
    </
    style
    <
    script type="text/javascript"
    <!-- 
    var 
    curDiv 0
    var 
    divSlide
    var 
    divId
    var 
    curLeft = -200

    function 
    swapDiv() { 
        
    divId "div"+curDiv
        
    divSlide setInterval("slideDiv()",30); 


    function 
    slideDiv() { 
        
    document.getElementById(divId).style.visibility="visible"
        
    curLeft curLeft 1
        if(
    curLeft 0)   {  //we have scrolled all the way to the right 
            
    document.getElementById(divId).style.visibility="hidden"
         
    clearInterval(divSlide); 
         
    curDiv curDiv 1
         if(
    curDiv 3curDiv 0
         
    curLeft = -200
         
    swapDiv(); 
        } else {  
    //keep scrolling to the right 
            
    document.getElementById(divId).style.left curLeft+"px"
         
    document.getElementById(divId).style.top 0+"px"
        } 
    }    
    //--> 
    </script> 
    </head> 
    <body> 

    <div id="main"> 
        <div id="div0">This is Div 1</div> 
        <div id="div1">This is Div 2</div> 
        <div id="div2">This is Div 3</div> 
        <div id="div3">This is Div 4</div> 
    </div> 

    <div id="btnContainer"> 
        <button onclick="swapDiv();">Rotate Divs</button> 
    </div> 

    </body> 
    </html> 
    Last edited by tirna; 04-05-2010 at 01:23 AM.

  3. #3
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Thank you, thank you!!

    Absolutely brilliant. Thank you (again).

    Two questions, if I may impose on your time a little more...

    1 - Is it possible to keep the last one visible while the next one slides in over the top?
    2 - Once the div has slid to position, how do I get it to pause for x seconds on that div before sliding the next one into place?

    Cheers
    CTB
    Oh Lord, please help me be the person my dog thinks I am.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    Just as well you're a fellow Aussie

    The previous div now remains in view while the new one slides over it.

    There is now a 5 second pause when a div finishes scrolling before the new one starts sliding over the top of it.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title></title
    <
    style type="text/css"
    <!-- 
    #main { 
    overflowhidden
    border1px solid black
    colorblack;
    text-aligncenter;
    positionabsolutetop30pxleft50px
    background-colorwhite
    width200px
    height200px

    #div0 { 
    displayblock;  
    positionabsolutetop300pxleft10px
    colorwhite;
    background-colorblack
    width200px
    height200px

    #div1 { 
    displayblock;  
    positionabsolutetop300pxleft300px
    background-colorgreen
    width200px
    height200px

    #div2 { 
    displayblock;  
    positionabsolutetop50pxleft300px
    background-colorred
    width200px
    height200px

    #div3 { 
    displayblock;  
    positionabsolutetop300pxleft600px
    background-colorblue
    width200px
    height200px

    #btnContainer { 
    positionabsolutetop250pxleft70px
    --> 
    </
    style
    <
    script type="text/javascript"
    <!-- 
    var 
    curDiv 0
    var 
    divSlide
    var 
    divId
    var 
    curLeft = -200
    var 
    zedIndex 0;
    var 
    pauser;

    function 
    swapDiv() { 
        
    divId "div"+curDiv;
        
    zedIndex zedIndex 100
        
    document.getElementById(divId).style.top 0+"px";
        
    divSlide setInterval("slideDiv()",30); 


    function 
    slideDiv() {  
        
    document.getElementById(divId).style.zIndex zedIndex//this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through
        
    curLeft curLeft 1
        if(
    curLeft 0)   {  //we have scrolled all the way to the right 
         
    clearInterval(divSlide); 
         
    clearTimeout(pauser);
         
    curDiv curDiv 1
         if(
    curDiv 3curDiv 0
         
    curLeft = -200
         
    pauser setTimeout("swapDiv()",5000); 
        } else {  
    //keep scrolling to the right 
            
    document.getElementById(divId).style.left curLeft+"px";  
        } 
    }    
    //--> 
    </script> 
    </head> 
    <body> 

    <div id="main"> 
        <div id="div0">This is Div 1</div> 
        <div id="div1">This is Div 2</div> 
        <div id="div2">This is Div 3</div> 
        <div id="div3">This is Div 4</div> 
    </div> 

    <div id="btnContainer"> 
        <button onclick="swapDiv();">Rotate Divs</button> 
    </div> 

    </body> 
    </html> 
    Last edited by tirna; 04-05-2010 at 02:46 AM.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    I've made one last change so you can now slide the divs from left to right or right to left.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

    <
    html xmlns="http://www.w3.org/1999/xhtml"
    <
    head
    <
    title></title
    <
    style type="text/css"
    <!-- 
    #main { 
    overflowhidden
    border1px solid black
    colorblack
    text-aligncenter
    positionabsolutetop30pxleft50px
    background-colorwhite
    width200px
    height200px
     
    #div0 {   
    positionabsolutetop300pxleft10px
    colorwhite
    background-colorblack
    width200px
    height200px
     
    #div1 {   
    positionabsolutetop300pxleft300px
    background-colorgreen
    width200px
    height200px
     
    #div2 {    
    positionabsolutetop50pxleft300px
    background-colorred
    width200px
    height200px
     
    #div3 {    
    positionabsolutetop300pxleft600px
    background-colorblue
    width200px
    height200px
     
    #btnContainer { 
    positionabsolutetop250pxleft10px
    --> 
    </
    style
    <
    script type="text/javascript"
    <!-- 
    var 
    curDiv 0
    var 
    divSlide
    var 
    divId
    var 
    curLeft = -200
    var 
    zedIndex 0
    var 
    pauser
     
    function 
    swapDiv(dir) {
        
    divId "div"+curDiv
        
    zedIndex zedIndex 100
        
    curLeft curLeft dir;
        
    document.getElementById(divId).style.top 0+"px"
        
    divSlide setInterval(function() {slideDiv(dir)},30); 

     
    function 
    slideDiv(dir) {   
        
    document.getElementById(divId).style.zIndex zedIndex//this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
        
    curLeft curLeft + (1*dir);  
        if(
    dir == && curLeft 0)   {  //we have scrolled all the way to the right 
         
    clearInterval(divSlide); 
         
    clearTimeout(pauser); 
         
    curDiv curDiv 1
         if(
    curDiv 3curDiv 0
         
    curLeft = -200 dir
         
    pauser setTimeout(function() {swapDiv(dir)},5000);
        } else if (
    dir == -&& curLeft 0) { //we have scrolled all the way to the left
          
    clearInterval(divSlide); 
          
    clearTimeout(pauser); 
          
    curDiv curDiv 1
          if(
    curDiv 3curDiv 0
          
    curLeft 200 dir
          
    pauser setTimeout(function() {swapDiv(dir)},5000);
        } else {  
    //keep scrolling to the right 
            
    document.getElementById(divId).style.left curLeft+"px";   
        } 
    }
     
    function 
    stopSliding(btn) {
        if(
    btn == "stop") {
            
    document.getElementById("l2r").disabled false;
            
    document.getElementById("r2l").disabled false;
            
    curLeft = -200;
        } else {  
            
    document.getElementById("l2r").disabled true;
            
    document.getElementById("r2l").disabled true;
        }
        
    clearInterval(divSlide); 
        
    clearTimeout(pauser);
    }     
    //--> 
    </script> 
    </head> 
    <body> 
     
    <div id="main"> 
        <div id="div0">This is Div 1</div> 
        <div id="div1">This is Div 2</div> 
        <div id="div2">This is Div 3</div> 
        <div id="div3">This is Div 4</div> 
    </div> 
     
    <div id="btnContainer"> 
        <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Slide Left 2 Right</button>
        <button onclick="stopSliding('stop');">Stop Sliding</button>
        <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Slide Right 2 left</button> 
    </div> 
     
    </body> 
    </html> 
    Last edited by tirna; 04-05-2010 at 07:02 AM.

  6. #6
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Once again... thank you , thank you.
    I really appreciate the time you've spent on this. Outstanding.
    Cheers
    CTB
    Oh Lord, please help me be the person my dog thinks I am.

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles