...

View Full Version : Changing Tween Parameters



millsy007
05-09-2009, 08:55 PM
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:


<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.st art();};
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();
}
}
}

itsjareds
05-10-2009, 05:50 PM
Could you post a demo of this in action?

This seems almost like too much work when you can use a third party javascript framework that can do animations like jQuery (http://jquery.com/) or MooTools (http://mootools.net/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum