知识大全 固定背景实现的背景滚动特效示例

Posted 背景

篇首语：吃过的馍馍不香，嚼过的甘蔗不甜。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 固定背景实现的背景滚动特效示例相关的知识，希望对你有一定的参考价值。

　　分享一个来自corpse的固定背景滚动特效 使用background attachment: fixed和导航菜单 页面会非常平滑的滚动  

　　HTML

代码如下: <div id="cbp fbscroller" > <nav> <a href="#fbsection " >Section </a> <a href="#fbsection ">Section </a> <a href="#fbsection ">Section </a> <a href="#fbsection ">Section </a> <a href="#fbsection ">Section </a> </nav> <section id="fbsection "></section> <section id="fbsection "></section> <section id="fbsection "></section> <section id="fbsection "></section> <section id="fbsection "></section> </div>

　　 CSS

 代码如下: /* Set all parents to full height */ body container cbp fbscroller cbp fbscroller section height: %; /* The nav is fixed on the right side and we center it by translating it % (we don t know it s height so we can t use the negative margin trick) */ cbp fbscroller > nav position: fixed; z index: ; right: px; top: %; webkit transform: translateY( %); moz transform: translateY( %); ms transform: translateY( %); transform: translateY( %); cbp fbscroller > nav a display: block; position: relative; color: transparent; height: px; cbp fbscroller > nav a:after content: ; position: absolute; width: px; height: px; border radius: %; border: px solid #fff; cbp fbscroller > nav a:hover:after background: rgba( ); cbp fbscroller > nav a cbp fbcurrent:after background: #fff; /* background attachment does the trick */ cbp fbscroller section position: relative; background position: top center; background repeat: no repeat; background size: cover; background attachment: fixed; #fbsection background image: url( /images/ jpg); #fbsection background image: url( /images/ jpg); #fbsection background image: url( /images/ jpg); #fbsection background image: url( /images/ jpg); #fbsection background image: url( /images/ jpg);  代码如下: /** * cbpFixedScrollLayout js v * * * Licensed under the MIT license * * * Copyright Codrops * */ var cbpFixedScrollLayout = (function() // cache and initialize some values var config = // the cbp fbscroller′s sections $sections : $( #cbp fbscroller > section ) // the navigation links $navlinks : $( #cbp fbscroller > nav:first > a ) // index of current link / section currentLink : // the body element $body : $( body ) // the body animation speed animspeed : // the body animation easing (jquery easing) animeasing : easeInOutExpo ; function init() // click on a navigation link: the body is scrolled to the position of the respective section config $navlinks on( click function() scrollAnim( config $sections eq( $( this ) index() ) offset() top ); return false; ); // waypoints defined: // First one when we scroll down: the current navigation link gets updated // A `new section′ is reached when it occupies more than % of the viewport // Second one when we scroll up: the current navigation link gets updated // A `new section′ is reached when it occupies more than % of the viewport config $sections waypoint( function( direction ) if( direction === down ) changeNav( $( this ) ); offset: % ) waypoint( function( direction ) if( direction === up ) changeNav( $( this ) ); offset: % ); // on window resize: the body is scrolled to the position of the current section $( window ) on( debouncedresize function() scrollAnim( config $sections eq( config currentLink ) offset() top ); ); // update the current navigation link function changeNav( $section ) config $navlinks eq( config currentLink ) removeClass( cbp fbcurrent ); config currentLink = $section index( section ); config $navlinks eq( config currentLink ) addClass( cbp fbcurrent ); // function to scroll / animate the body function scrollAnim( top ) config $body stop() animate( scrollTop : top config animspeed config animeasing ); return init : init ; )();  cha138/Article/program/Java/JSP/201311/20507

相关参考