Examples of background scrolling effects implemented by fixed backgrounds

Source: Internet
Author: User
Tags codrops


Share a fixed background rolling effect from corpse. Use the background-attachment: fixed and navigation menu to scroll the page smoothly.
HTML

Copy codeThe Code is as follows:
<Nav>
<A href = "# fbsection1" class = "White-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 codeThe 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 Copy codeThe 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 };
})();

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.