jquery html5页面视差滚动标题固定显示效果代码



68 269 90



特效描述:jquery html5页面视差滚动 标题固定显示效果,html5页面视差滚动

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/styles.css" />

2. 引入JS

<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/js/sscr.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/viewport-units-buggyfill.js"></script>
<script src="midnight.jquery.js"></script>

3. HTML代码

  <!-- Our super awesome changing header! -->
  <nav class="fixed">
    <div class="midnightHeader default">
      <div class="logo-holder">
        <a class="logo"><span class="screenreader"></span></a>
      </div>
    </div>
  </nav>
  <div class="first-background" data-midnight="white">
    <!-- Hi! -->
  </div>
  <header data-midnight="black">
    <div class="container">
      <h1 class="wow fadeInUp">Midnight.js lets you switch fixed headers on the fly</h1>
      <p class="wow fadeInUp">Scroll to try it out!</p>
      <div class="scroll-prompt wow fadeInUp"></div>
      <figure id="space-island">
        <img class="wow fadeInUp" src="assets/css/images/space-island.jpg" />
      </figure>
    </div>
  </header>
  <section class="step step-one" data-midnight="blue">
    <div class="container">
      <div class="instructions wow fadeInLeft">
        <h2>The Header</h2>
        <p>Create your fixed nav (or header) as you typically would.</p>
        <p>You can use whatever markup suits you, just make sure the header works well with <em>position:fixed</em>.</p>
      </div>
      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;!-- Your Fixed Nav --&gt;
&lt;nav class="fixed"&gt;
  &lt;a class="logo"&gt;Logo&lt;/a&gt;
&lt;/nav&gt;</code></pre>
    </div>
  </section>
  <section class="step step-two" data-midnight="light">
    <div class="container">
      <div class="instructions wow fadeInLeft">
        <h2>The Sections</h2>
        <p>After that, take any sections of your page that need a different nav and add <em>data-midnight="your-class"</em> to it, where <em>.your-class</em> is the class you are going to use to style that header.</p>
        <p>If you don't use the property or just leave it blank, the <em>.default</em> class will be used for that section.</p>
      </div>
      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;section data-midnight="white"&gt;
  &lt;h1&gt;Use a white nav here&lt;/h1&gt;
&lt;/section&gt;
&lt;div data-midnight="blue"&gt;
  &lt;h1&gt;And a blue nav here&lt;/h1&gt;
&lt;/div&gt;
&lt;footer&gt;
  &lt;h1&gt;This will just use the default header&lt;/h1&gt;
&lt;/footer&gt;</code></pre>
    </div>
  </section>
  <section class="step step-three" data-midnight="dark">
    <div class="container">
      <div class="instructions wow fadeInLeft">
        <h2>Styling your headers</h2>
        <p>You can style it in your css using the class <em>.midnightHeader.your-class</em>.</p>
        <p>Use whatever CSS or markup you like for each one. They will be switched automatically when necessary.</p>
      </div>
      <pre class="line-numbers wow fadeInRight"><code class="language-css">.midnightHeader.default {
  background: none;
  color: black;
}
.midnightHeader.white {
  background: white;
  color: black;
}
.midnightHeader.blue {
  background: blue;
  color: white;
}</code></pre>
    </div>
  </section>
  <section class="step step-four" data-midnight="lighter">
    <div class="container">
      <div class="instructions wow fadeInLeft">
        <h2>The jQuery Plugin</h2>
        <p>To make everything work, just load midnight (and jQuery) and initialize it. We take care of the rest.</p>
      </div>
      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;script src="midnight.jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
// Start midnight
$(document).ready(function(){
  // Change this to the correct selector.
  $('nav.fixed').midnight();
});
&lt;/script&gt;</code></pre>
    </div>
  </section>
  <section class="step step-five full-height" data-midnight="white">
    <div class="container">
      <div class="instructions wow fadeInLeft">
        <h2>Further customization</h2>
        <p>Want to use custom markup for each header?</p>
        <p>You just need to add a div with the class <em>.midnightHeader.default</em> inside your header, as well as any other custom headers you want.</p>
        <p>For instance the "butterflies" section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.</p>
      </div>
      <pre class="line-numbers wow fadeInRight"><code class="language-markup">&lt;nav class="fixed"&gt;
  &lt;!-- Your standard header --&gt;
  &lt;div class="midnightHeader default"&gt;
    &lt;a class="logo"&gt;Logo&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- A header with butterflies --&gt;
  &lt;div class="midnightHeader butterflies"&gt;
    &lt;a class="logo"&gt;Logo&lt;/a&gt;
    &lt;span class="a-butterfly"&gt;&lt;/span&gt;
    &lt;span class="another-butterfly"&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
    </div>
  </section>
  <footer class="footer" data-midnight="full">
    <div class="illustration-city">
    </div>
  </footer>
  <script>
    $(document).ready(function(){
      // vh fix for iOS7 (Not that it works well on that anyway)
      viewportUnitsBuggyfill.init();
      $(window).resize(function(){
        viewportUnitsBuggyfill.refresh();
      });
      // Start Midnight!
      $('nav.fixed').midnight();
      // Start wow.js
      new WOW().init();
      // The island disappears when the logo moves on top of it
      var $island = $('#space-island');
      var islandTop = $island.offset().top;
      var windowHeight = $(window).height();
      $(window).resize(function(){
        islandTop = $island.offset().top;
        windowHeight = $(window).height();
      });
      $(document).scroll(function(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var minScrollTop = islandTop - windowHeight * 0.4;
        var maxScrollTop = islandTop;
        // Opacity goes from 1.0 at the bottom 2/3 of the screen to 0.4 at the top
        if( scrollTop <= islandTop*2 ) {
          var targetOpacity = 1.0;
          var minOpacity = 0.4;
          if( scrollTop > minScrollTop && scrollTop < maxScrollTop ) {
            targetOpacity = ((maxScrollTop - scrollTop) / (maxScrollTop - minScrollTop)) * (1.0 - minOpacity) + minOpacity;
          }
          else if( scrollTop > maxScrollTop ) {
            targetOpacity = minOpacity;
          }
          else if( scrollTop < minScrollTop ) {
            targetOpacity = 1.0;
          }
          $island.css('opacity', targetOpacity);
        }
      });
      $('.scroll-prompt').click(function(event){
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $("section.step-one").offset().top - $('nav').height() * 0.5
        }, 1000, 'swing');
      });
      $(window).trigger('resize');
    });
  </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 全屏滚动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到