midnight.js是一款能够让你的网站logo随页面滚动并产生视觉差滚动效果的jquery插件。midnight.js能产生多重header的视觉差滚动效果，能够让你的页面始终处于header的下面。HTML结构创建一个固定的导航和header，例如像下面这样。

你必须确保header的定位方式为：position:fixed。然后你可以在你的页面中添加多个section，每个section在logo进入时都会呈现不同的状态，给section添加data-midnight="your-class"。如果你不使用任何属性或只是留下空白，那么那个section将被应用为.default。

A section with a dark background, so a white nav would look better here

A blue nav looks better here

CSS样式你可以在.midnightHeader.your-class中替换你的样式，例如：.midnightHeader.default { background: none; color: black;}.midnightHeader.white { background: white; color: black;}.midnightHeader.blue { background: blue; color: white;}.midnightHeader.red { background: red; color: white;}JAVASCRIPT在页面中引入jQuery文件和midnight.jquery.js：自定义标签如果你想创建一个属于自己的漂亮的header或logo，那么你需要做好两件事：首先，添加一个div，给它class midnightHeader和default 。然后，添加一个div，给它class midnightHeader和your-class。注意：所有的header需要相同的高度。可选参数下面是使用midnight时的一些可选参数：$('nav').midnight({ // The class that wraps each header. Used as a clipping mask. headerClass: 'midnightHeader', // The class that wraps the contents of each header. Also used as a clipping mask. innerClass: 'midnightInner', // The class used by the default header (useful when adding multiple headers with different markup). defaultClass: 'default'});

midnight - 网页滚动视差效果插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»