Background scrolling effect sample with fixed background implementation sharing _javascript tips

Share a fixed background scrolling effect from corpse, use background-attachment:fixed and navigation menus, and the page will scroll very smoothly.
HTML

Copy Code code as follows:

<div id= "Cbp-fbscroller" class= "Cbp-fbscroller" >
<nav>
<a href= "#fbsection1" class= "cbp-fbcurrent" >section 1</a>
<a href= "#fbsection2" >section 2</a>
<a href= "#fbsection3" >section 3</a>
<a href= "#fbsection4" >section 4</a>
<a href= "#fbsection5" >section 5</a>
</nav>
<section id= "Fbsection1" ></section>
<section id= "Fbsection2" ></section>
<section id= "Fbsection3" ></section>
<section id= "Fbsection4" ></section>
<section id= "Fbsection5" ></section>
</div>

CSS

Copy Code code as follows:

/* 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 are 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

Copy Code code as follows:

/**
* 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 the "scrolled" to the position of the respective section
Config. $navlinks. On (' click ', function () {
Scrollanim (config. $sections. EQ ($ (a). Index ()). Offset (). top);
return false;
} );
2 waypoints defined:
The 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 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 the ' scrolled to the position '
$ (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};
})();