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

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

HTML结构

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

<nav class="fixed">
  <a class="logo">Logo</a>
</nav>
                

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

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

<section data-midnight="white">
  <h1>A section with a dark background, so a white nav would look better here</h1>
</section>

<div data-midnight="blue">
  <h1>A blue nav looks better here</h1>
</div>

<footer>
  <h1>This will just use the default header</h1>
</footer>
                

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：

<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="midnight.jquery.min.js"></script>
                

自定义标签

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

• 首先，添加一个div，给它class midnightHeader和default 。
• 然后，添加一个div，给它class midnightHeader和your-class。
• 注意：所有的header需要相同的高度。

<nav class="fixed">
  <!-- Your standard header -->
  <div class="midnightHeader default">
    <a class="logo">Logo</a>
  </div>

  <!-- A header with a butterfly -->
  <div class="midnightHeader butterfly">
    <a class="logo">Logo</a>
    <span class="a-butterfly"><!-- Everybody loves butterflies! --></span>
    <span class="another-butterfly"><!-- OH GOD THEY ARE IN MY FACE --></span>
    <span class="yet-another-butterfly"><!-- AAAAAHHHHHHHHHHHHHHHHHHHHH --></span>
  </div>
</nav>
                

可选参数

下面是使用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的信息请参看：https://github.com/Aerolab/midnight.js。