Changing Tween Parameters

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
millsy007
Forum Commoner
Posts: 78
Joined: Wed Jul 02, 2008 7:00 pm

Changing Tween Parameters

Post 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();
        }
    }
 
Last edited by Benjamin on Sun May 10, 2009 12:10 am, edited 1 time in total.
Reason: Changed code type from text to javascript.
Post Reply