打开侧边栏菜单的特殊效果代码基于jQuery的倾斜
结果如下:
在线预览源代码下载
HTML代码:
回家
关于我们
我们的工作
接触
单击左上角的按钮打开菜单。
应用:火狐,Chrome,浏览器,Safari,Opera,搜狗,傲游,世界之窗。浏览器不支持IE。
JS代码:
无功papermenu = { {
美元($ #窗户:窗户纸),
paperfront美元($ #纸:前面的),
汉堡包:(美元,汉堡包),
偏移:,
PageHeight:$(#论文前面的)OuterHeight(),
打开:函数(){
这window.addclass美元('tilt);
这hamburger.off美元(听到咔哒声);
$(#容器。汉堡),(听到咔哒声,this.close.bind(这));
This.hamburgerFix(真的);
/ / console.log('opening…);
},
关闭:函数(){
这window.removeclass美元('tilt);
$(#容器。汉堡)。关(听到咔哒声);
这hamburger.on美元(听到咔哒声,this.open.bind(这));
This.hamburgerFix(假);
/ / console.log('closing…);
},
UpdateTransformOrigin:函数(){
scrollTop =这window.scrolltop美元();
方程=(scrollTop +这个偏移量)/ this.pageheight *;
这paperfront.css美元('transform-origin ','center +方程+%);
},
HamburgerFix:功能(开){
如果(打开){
美元(汉堡包)Css({
位置:绝对的,
上图:这个window.scrolltop美元()+ 'px
});
{人}
setTimeout(){()函数(
美元(汉堡包)Css({
位置:固定的,
上图:'px
});
});
}
},
BindEvents:函数(){
这hamburger.on美元(听到咔哒声,this.open.bind(这));
$(关闭),(听到咔哒声,this.close.bind(这));
这window.on美元('scroll ',this.updatetransformorigin.bind(这));
},
init:函数(){
this.bindevents();
This.updateTransformOrigin();
}
};
PaperMenu.init();