Examples of background scrolling special effects with fixed background implementation _ javascript tips-js tutorial

Fixed background scrolling effects. When using background-attachment: fixed and navigation menu, the page will scroll smoothly. If you are interested, refer to the following for help.
Share a fixed background rolling effect from corpse. Use the background-attachment: fixed and navigation menu to scroll the page smoothly.
HTML

The Code is as follows:

Section 1
Section 2
Section 3
Section 4
Section 5

CSS

The Code is as follows:

/* Set all parents to full height */
Html, body,
. Container,
. White-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: Maid (-50% );
}
. Cbp-fbscroller> nav {
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 );
}
. White-fbscroller> nav a. White-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

The Code is 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: $ ('# White-fbscroller> colout '),
// The navigation links
$ Navlinks: $ ('# cbp-fbscroller> nav: first> '),
// 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 = 'low') {changeNav ($ (this ));}
}, {Offset: '000000'}). 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 ('destuncedresize', function (){
ScrollAnim (config. $ sections. eq (config. currentLink). offset (). top );
});
}
// Update the current navigation link
Function changeNav ($ section ){
Config. $ navlinks. eq (config. currentLink). removeClass ('white-fbcurrent ');
Config. currentLink = $ section. index ('region ');
Config. $ navlinks. eq (config. currentLink). addClass ('white-fbcurrent ');
}
// Function to scroll/animate the body
Function scrollAnim (top ){
Config. $ body. stop (). animate ({scrollTop: top}, config. animspeed, config. animeasing );
}
Return {init: init };
})();