Simple Animation

**chestertb** · 04-04-2010 10:14 PM

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

**tirna** · 04-05-2010 12:43 AM

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 { 

overflow: hidden; 

border: 1px solid black; 

color: black;

text-align: center;

position: absolute; top: 30px; left: 50px; 

background-color: white; 

width: 200px; 

height: 200px} 



#div0 { 

display: block; 

visibility: hidden; 

position: absolute; top: 300px; left: 10px; 

color: white;

background-color: black; 

width: 200px; 

height: 200px} 



#div1 { 

display: block; 

visibility: hidden; 

position: absolute; top: 300px; left: 300px; 

background-color: green; 

width: 200px; 

height: 200px} 



#div2 { 

display: block; 

visibility: hidden; 

position: absolute; top: 50px; left: 300px; 

background-color: red; 

width: 200px; 

height: 200px} 



#div3 { 

display: block; 

visibility: hidden; 

position: absolute; top: 300px; left: 600px; 

background-color: blue; 

width: 200px; 

height: 200px} 



#btnContainer { 

position: absolute; top: 250px; left: 70px} 

--> 

</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 > 3) curDiv = 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>

**chestertb** · 04-05-2010 01:30 AM

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

**tirna** · 04-05-2010 02:13 AM

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 { 

overflow: hidden; 

border: 1px solid black; 

color: black;

text-align: center;

position: absolute; top: 30px; left: 50px; 

background-color: white; 

width: 200px; 

height: 200px} 



#div0 { 

display: block;  

position: absolute; top: 300px; left: 10px; 

color: white;

background-color: black; 

width: 200px; 

height: 200px} 



#div1 { 

display: block;  

position: absolute; top: 300px; left: 300px; 

background-color: green; 

width: 200px; 

height: 200px} 



#div2 { 

display: block;  

position: absolute; top: 50px; left: 300px; 

background-color: red; 

width: 200px; 

height: 200px} 



#div3 { 

display: block;  

position: absolute; top: 300px; left: 600px; 

background-color: blue; 

width: 200px; 

height: 200px} 



#btnContainer { 

position: absolute; top: 250px; left: 70px} 

--> 

</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 > 3) curDiv = 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>

**tirna** · 04-05-2010 07:00 AM

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 { 

overflow: hidden; 

border: 1px solid black; 

color: black; 

text-align: center; 

position: absolute; top: 30px; left: 50px; 

background-color: white; 

width: 200px; 

height: 200px} 

 

#div0 {   

position: absolute; top: 300px; left: 10px; 

color: white; 

background-color: black; 

width: 200px; 

height: 200px} 

 

#div1 {   

position: absolute; top: 300px; left: 300px; 

background-color: green; 

width: 200px; 

height: 200px} 

 

#div2 {    

position: absolute; top: 50px; left: 300px; 

background-color: red; 

width: 200px; 

height: 200px} 

 

#div3 {    

position: absolute; top: 300px; left: 600px; 

background-color: blue; 

width: 200px; 

height: 200px} 

 

#btnContainer { 

position: absolute; top: 250px; left: 10px} 

--> 

</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 == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 

     clearInterval(divSlide); 

     clearTimeout(pauser); 

     curDiv = curDiv + 1; 

     if(curDiv > 3) curDiv = 0; 

     curLeft = -200 * dir; 

     pauser = setTimeout(function() {swapDiv(dir)},5000);

    } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left

      clearInterval(divSlide); 

      clearTimeout(pauser); 

      curDiv = curDiv + 1; 

      if(curDiv > 3) curDiv = 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>

**chestertb** · 04-05-2010 04:00 PM

Once again... thank you , thank you.
I really appreciate the time you've spent on this. Outstanding.
Cheers
CTB

Thread: Simple Animation

Thread Tools

Display

Simple Animation

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions