Page 1 of 1

Changing Tween Parameters

Posted: Sat May 09, 2009 2:58 pm
by millsy007
Hi

I am currently using javascript tween to animate my pages so that the content is moved 'up and out' of my screen. Currently it appears to 'fly' out the top of my page. However I have an image header and I do not like the way the animated text goes over it. Is there a way I could change my javascript so when the text moves up and disappears it only goes up say 100px from the top of my screen?

I have tried experimenting changing values in the javascript with no joy:

Code: Select all

<a href="#p1" onclick="animate('p1');return false;" id="home">Home</a>
 
 
function portfolio(website) {
    var portfolio = document.getElementsByName("portfolio");
    for(x=0;x<portfolio.length;x=x+1) {
        portfolio[x].style.display="none";
    }
    document.getElementById(website).style.display="";
}
function init() {
    document.getElementById("p1").style.top=0+"px";
    document.getElementById("nav").style.display="block";
}
 
function animate(content) {
    if(content=="p2") {
        animateX(0,'work');
    }
    if(content=="p3") {
        animateX(0,'news');
    }
    for (x=1;x<5;x=x+1) {
        div = "p"+parseInt(x);
        if(document.getElementById(div).offsetTop==0) {
            exit = new Tween(document.getElementById(div).style,'top',Tween.strongEaseIn,0,-1000,0.65,'px');
            exit.onMotionFinished = function(){entrance = new Tween(document.getElementById(content).style,'top',Tween.strongEaseOut,1000,0,0.65,'px');entrance.start();};
            exit.start();
        }
    }
}
 
function animateX(content,page) {
    if(page=="work"){var loop=6;}
    if(page=="news"){var loop=5;}
    var newContent = page+content;
    for (x=0;x<loop;x=x+1) {
        div = page+parseInt(x);
        if(document.getElementById(div).offsetLeft==0) {
            exit = new Tween(document.getElementById(div).style,'left',Tween.strongEaseIn,0,-500,0.4,'px');
            exit.onMotionFinished = function(){entrance = new Tween(document.getElementById(newContent).style,'left',Tween.strongEaseOut,500,0,0.4,'px');entrance.start();};
            exit.start();
        }
    }
}
 
function animateXReverse(content,page) {
    if(page=="work"){var loop=6;}
    if(page=="news"){var loop=5;}   
    var newContent = page+content;
    for (x=0;x<loop;x=x+1) {
        div = page+parseInt(x);
        if(document.getElementById(div).offsetLeft==0) {
            exit = new Tween(document.getElementById(div).style,'left',Tween.strongEaseIn,0,500,0.4,'px');
            exit.onMotionFinished = function(){entrance = new Tween(document.getElementById(newContent).style,'left',Tween.strongEaseOut,-500,0,0.4,'px');entrance.start();};
            exit.start();
        }
    }