A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: How to autoscroll menu buttons like on kilfish.com

  1. #1
    Senior Member
    Join Date
    Oct 2005
    Posts
    198

    How to autoscroll menu buttons like on kilfish.com

    Hi,

    Does any one know how this effect is achieved on the menu buttons on http://www.kilfish.com. I looked at the .js but still can't figure it out. Is there a simpler way to do this?

    Thanks,
    ---Yvette

  2. #2
    Senior Member
    Join Date
    Oct 2005
    Posts
    198
    Here's the code(I think)--Simpler way?
    Code:
    //----------NAV MENU FUNCTIONS----------
    
    function InitNavMenu(){
    	if (ItIsAContentPage){
    		WorkTypeID=location.search.substr(12,1);
    		CurrentWorkID=location.search.substring(21,location.search.length);
    	};
    	$("#nav").rotate(-20);
    	$(".navMenu").each(function(index) {
    		CreateSlantButtonSprite($(this));		
    		if(ItIsAContentPage){
    			if($(this).index()==WorkTypeID){
    				var buttonSprite=$(this).children().children().get(0);
    				$(buttonSprite).triggerHandler("mouseenter");
    			};
    		};		
    		$(this).click(function(){
    			if(ItIsAContentPage){
    				PageToOpen=IndexPageURLs[$(this).index()];
    				ClosePage();
    			} else {				
    				if(!(window.location.hash=="#/home" && $(this).index()==0) && !(window.location.hash=="#/web" && $(this).index()==1) && !(window.location.hash=="#/motion" && $(this).index()==2) && !(window.location.hash=="#/graphics" && $(this).index()==3) && !(window.location.hash=="#/contact" && $(this).index()==4)){
    					HidePrevButton();
    					HideNextButton();			
    					HomeContentDisappear();
    					ContactContentDisappear();
    					
    					//StartScrollDelay=800;
    					
    					var contentToScroll=$($(this).children().get(0)).attr("href");
    					ScrollToContent(contentToScroll);
    					//ScrollToContentAnimationLength=5000
    					
    					
    					if($(this).index()!=0 && $(this).index()!=4 && CanvasOnStageID==0){
    						RotateInDelay=ScrollToContentAnimationLength-ROTATE_IN_ANIMATION_LENGTH;
    						if ($(this).index()==1){
    							InitializeThumbCanvas(1);
    							CreateThumbs("web");
    							thumbsMaster.RotateIn();
    						};
    						if ($(this).index()==2){
    							InitializeThumbCanvas(2);
    							CreateThumbs("motion");
    							thumbsMaster.RotateIn();
    						};
    						if ($(this).index()==3){
    							InitializeThumbCanvas(3);
    							CreateThumbs("graphics");
    							thumbsMaster.RotateIn();
    						};					
    					} else if($(this).index()!=0 && $(this).index()!=4 && CanvasOnStageID>0){
    						CanvasToLoad=$(this).index();
    						thumbsMaster.RotateOut();
    						RotateInDelay=ScrollToContentAnimationLength-ROTATE_IN_ANIMATION_LENGTH-thumbsMaster.animationLength;
    					} else if(($(this).index()==0 || $(this).index()==4) && CanvasOnStageID>0){
    						CanvasToLoad=0;
    						thumbsMaster.RotateOut();
    						if ($(this).index()==0){
    							HomeContentDelay=ScrollToContentAnimationLength-500;
    							HomeContentAppear();
    						} else if ($(this).index()==4){
    							ContactContentDelay=ScrollToContentAnimationLength-1000;
    							ContactContentAppear();
    						}
    					} else if(($(this).index()==0 || $(this).index()==4) && CanvasOnStageID==0){
    						if ($(this).index()==0){
    							HomeContentDelay=ScrollToContentAnimationLength-1200;
    							HomeContentAppear();
    						} else if ($(this).index()==4){
    							ContactContentDelay=ScrollToContentAnimationLength-1000;
    							ContactContentAppear();
    						};
    					};
    				};
    			};
    			return false;
    		});
    	});
    };
    function ResetNavMenu(){
    	$(".navMenu").each(function(){
    		if ($($(this).children().get(0)).attr("href")==location.hash){
    			$($($(this).children().get(0)).children().get(0)).triggerHandler("mouseenter");
    		} else {
    			$($($(this).children().get(0)).children().get(0)).triggerHandler("mouseleave");
    		};
    	});
    };
    function ScrollToContent(contenthash){
    	$("html, body").stop();
    	AutoScroll=true;
    	var ContentAnchor="#"+String(contenthash.substring(2,contenthash.length));
    	for (var i=0; i<WorkTypes.length; i++){
    		if (contenthash=="#/"+WorkTypes[i]){
    			var imageClass='".'+WorkTypes[i]+'ThumbImage"';
    			if($(eval(imageClass)).length>=VISIBLE_THUMBS_ON_SCENE){			
    				ContentAnchor="#"+WorkTypes[i]+VISIBLE_THUMBS_ON_SCENE;
    			}else{
    				ContentAnchor="#"+WorkTypes[i]+$(eval(imageClass)).length;
    			};
    		};
    	};	
    	var targetScrollPos=$(ContentAnchor).css("top");
    	if(String(targetScrollPos)=="auto"){
    		targetScrollPos=0;
    	}else{
    		targetScrollPos=targetScrollPos.substr(0,targetScrollPos.length-2);		
    		if(ContentAnchor=="#contact"){
    			targetScrollPos=Number(targetScrollPos)+10;
    		};
    	};
    	ScrollToContentAnimationLength=75*Math.pow(Math.abs($(window).scrollTop()-targetScrollPos),0.5);			
    	$("html, body").animate({
    		scrollTop:targetScrollPos
        }, ScrollToContentAnimationLength, "easeInOutSine", function(){
    		/////
    		window.location.hash=contenthash;
    		$("html").scrollTop(targetScrollPos);
    		$("body").scrollTop(targetScrollPos);
    		CheckMasterMilestone();								
    		setAutoScrollToFalseTimeout=setTimeout(SetAutoScrollToFalse,100);
    	});	
    };
    function SetAutoScrollToFalse(){
    	AutoScroll=false;
    	FadeInPrevNextButtons();
    	InertiaMasterEasing=0.1;
    };
    function RedirectToMenu(){
    	if(location.hash.length>0){		
    		if(location.hash=="#/"){
    			window.location="#/home";
    		};		
    		var locationHash=location.hash;
    		var ContentAnchor="#"+String(location.hash.substring(2,location.hash.length));
    		SkipToMenu(ContentAnchor);
    	}else{
    		HomeContentAppear();
    		window.location="#/home";
    		ResetNavMenu();
    	};
    };
    function SkipToMenu(targetcontent){	
    	//if IE BUG MIATT:
    	if (String(targetcontent).length>1){
    		AutoScroll=true;
    		////
    		////SkipIn()-BEN ANGLLE ÉRTÉK OPCIONÁLISAN MEGADHATÓ: SkipIn(value)
    		////		
    		InertiaMasterEasing=1;
    		if (targetcontent=="#web"){
    			InitializeThumbCanvas(1);
    			CreateThumbs("web");
    			thumbsMaster.SkipIn();			
    		} else if (targetcontent=="#motion"){
    			InitializeThumbCanvas(2);
    			CreateThumbs("motion");
    			thumbsMaster.SkipIn();
    		} else if (targetcontent=="#graphics"){
    			InitializeThumbCanvas(3);
    			CreateThumbs("graphics");
    			thumbsMaster.SkipIn();
    		};		
    		var targetScrollPos=0;
    		if (targetcontent=="#home" || targetcontent=="#contact"){
    			targetScrollPos=$(targetcontent).css("top");
    			targetScrollPos=targetScrollPos.substr(0,targetScrollPos.length-2);	
    			if (targetcontent=="#contact"){
    				ScrollDirection=-1;
    				targetScrollPos++;
    				ContactContentAppear();
    			};
    			if (targetcontent=="#home"){
    				var buttonSprite=$(".navMenu").children(0).children().get(0);
    				$(buttonSprite).triggerHandler("mouseenter");
    				HomeContentAppear();
    			};	
    		}else{			
    			var milestoneid;			
    			for (var i=0; i<WorkTypes.length; i++){
    				if (targetcontent=="#"+WorkTypes[i]){
    					var imageClass='".'+WorkTypes[i]+'ThumbImage"';				
    					if($(eval(imageClass)).length>=VISIBLE_THUMBS_ON_SCENE){			
    						milestoneid="#"+WorkTypes[i]+VISIBLE_THUMBS_ON_SCENE;
    					}else{
    						milestoneid="#"+WorkTypes[i]+$(eval(imageClass)).length;
    					};					
    				};
    			};
    			targetScrollPos=$(milestoneid).css("top");
    			targetScrollPos=targetScrollPos.substr(0,targetScrollPos.length-2)-0.5*MilestoneDistance;	
    		};	
    		$("html, body").animate({
    			scrollTop:targetScrollPos
        	}, 1, function(){
    			/////			
    			$("html").scrollTop(targetScrollPos);
    			$("body").scrollTop(targetScrollPos);
    			InertiaMaster=$(window).scrollTop();
    			for (var j=0; j<FlyingObjects.length; j++) {
    				FlyingObjects[j].SetPosition();
    			};
    			CheckMasterMilestone();
    			if (targetcontent=="#web"){
    				$("#workWebTitle").stop(false,true);
    			} else if (targetcontent=="#motion"){
    				$("#workMotionTitle").stop(false,true);
    			} else if (targetcontent=="#graphics"){
    				$("#workGraphicsTitle").stop(false,true);
    			};						
    			setAutoScrollToFalseTimeout=setTimeout(SetAutoScrollToFalse,100);
    		});
    	};
    };
    Thanks,
    ---Yvette

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center