jQuery网站Logo视觉差滚动插件midnight.js

2019-10-09 09:29:40 作者: 大梦 浏览: 9 [百度未收录] [搜狗已收录] [360已收录]

简要教程

midnight.js是一款效果非常酷的jquery视觉差滚动效果插件。它可以让你的顶部导航或logo在滚动到不同的区域时呈现多种不同的视觉状态。

HTML结构

创建一个固定的导航和header,例如像下面这样。

1
2
3
<nav class="fixed">
  <a class="logo">Logoa>
nav>

你必须确保header的定位方式为:position:fixed。

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

1
2
3
4
5
6
7
8
9
10
11
<section data-midnight="white">
  <h1>A section with a dark background, so a white nav would look better hereh1>
section>
 
<div data-midnight="blue">
  <h1>A blue nav looks better hereh1>
div>
 
<footer>
  <h1>This will just use the default headerh1>
footer>

CSS样式

你可以在.midnightHeader.your-class中替换你的样式,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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:

1
2
<script src="assets/js/jquery-1.11.1.min.js">script>
<script src="midnight.jquery.min.js">script>
1
2
3
4
5
6
7

自定义标签

如果你想创建一个属于自己的漂亮的header或logo,那么你需要做好两件事:

  • 首先,添加一个div,给它class midnightHeader和default 。
  • 然后,添加一个div,给它class midnightHeader和your-class。
  • 注意:所有的header需要相同的高度。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav class="fixed">
  
  <div class="midnightHeader default">
    <a class="logo">Logoa>
  div>
 
  
  <div class="midnightHeader butterfly">
    <a class="logo">Logoa>
    <span class="a-butterfly">span>
    <span class="another-butterfly">span>
    <span class="yet-another-butterfly">span>
  div>
nav>

可选参数

下面是使用midnight时的一些可选参数:

1
2
3
4
5
6
7
8
$('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的信息请参看:https://github.com/Aerolab/midnight.js

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的