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
Printable View
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
Here's the code(I think)--Simpler way?
Thanks,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);
});
};
};
---Yvette