Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Tween Parameters

    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:
    <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();
    		}
    	}
    }

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    29
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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 or MooTools.


  •  

    Posting Permissions

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