特效描述: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"><!-- Your Fixed Nav --> <nav class="fixed"> <a class="logo">Logo</a> </nav></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"><section data-midnight="white"> <h1>Use a white nav here</h1> </section> <div data-midnight="blue"> <h1>And a blue nav here</h1> </div> <footer> <h1>This will just use the default header</h1> </footer></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"><script src="midnight.jquery.js"></script> <script> // Start midnight $(document).ready(function(){ // Change this to the correct selector. $('nav.fixed').midnight(); }); </script></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"><nav class="fixed"> <!-- Your standard header --> <div class="midnightHeader default"> <a class="logo">Logo</a> </div> <!-- A header with butterflies --> <div class="midnightHeader butterflies"> <a class="logo">Logo</a> <span class="a-butterfly"></span> <span class="another-butterfly"></span> </div> </nav></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>