html固定背景交替视频教程,固定背景实现的背景滚动特效示例分享

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

HTML

Section 1

Section 2

Section 3

Section 4

Section 5

CSS

/* Set all parents to full height */

html, body,

.container,

.cbp-fbscroller,

.cbp-fbscroller section {

height: 100%;

}

/* The nav is fixed on the right side and we center it by translating it 50%

(we don't know it's height so we can't use the negative margin trick) */

.cbp-fbscroller > nav {

position: fixed;

z-index: 9999;

right: 100px;

top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.cbp-fbscroller > nav a {

display: block;

position: relative;

color: transparent;

height: 50px;

}

.cbp-fbscroller > nav a:after {

content: '';

position: absolute;

width: 24px;

height: 24px;

border-radius: 50%;

border: 4px solid #fff;

}

.cbp-fbscroller > nav a:hover:after {

background: rgba(255,255,255,0.6);

}

.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;

}

#fbsection1 {

background-image: url(../images/1.jpg);

}

#fbsection2 {

background-image: url(../images/2.jpg);

}

#fbsection3 {

background-image: url(../images/3.jpg);

}

#fbsection4 {

background-image: url(../images/4.jpg);

}

#fbsection5 {

background-image: url(../images/5.jpg);

}

Javascript

/**

* cbpFixedScrollLayout.js v1.0.0

* http://www.codrops.com

*

* Licensed under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*

* Copyright 2013, Codrops

* http://www.codrops.com

*/

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 : 0,

// the body element

$body : $( 'html, body' ),

// the body animation speed

animspeed : 650,

// 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;

} );

// 2 waypoints defined:

// First one when we scroll down: the current navigation link gets updated.

// A `new section′ is reached when it occupies more than 70% 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 70% of the viewport

config.$sections.waypoint( function( direction ) {

if( direction === 'down' ) { changeNav( $( this ) ); }

}, { offset: '30%' } ).waypoint( function( direction ) {

if( direction === 'up' ) { changeNav( $( this ) ); }

}, { offset: '-30%' } );

// 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 };

})();