From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
A simple scrolling layout with fixed background images using background-attachment: fixed
and a navigation. The page will scroll smoothly to the selected section.
The HTML
<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>
The 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); }
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The 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 }; })();
Love it. Before I go ahead using it with all its simple greatness and ease, what would its compatability be like across various browsers?
Apparently “background-attachment: fixed;” is well supported (Ch/Sa 1.0, FF 1.0, IE 4.0, Op 3.5):
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Smashing! Thank you.
How would I be able to put text on each different background? so that if i clicked on the 2nd scroll bubble, the text would change?
same question.. thx!
Same question that I have… I haven’t been able to figure this one out yet (though I haven’t been at it for that long). Anyone have any ideas?
Is there a tutorial to how put text on each different background ?
I did it by placing articles inside each section. Worked perfectly fine. 🙂
I was actually looking for this yesterday. Are you are a mind reader!?
This is very nice, but doesn’t work on an iPad – you’ll need some sort of fallback if that matters to you.
This fails hard on mobile devices (?)
Hi, thank you for this blueprint 🙂 You still have really modern and inspirational webdesign stuff 🙂
I have one question. Is there way to show it correctly on android 2.3+ ?
I know that it is only blueprint, but I am trying to find a way to show it correctly on mobile resolution too.
hey miroslav
have you found a way?
The highlighting of the current section in the navigation doesn’t work here in Chrome on Windows. Works fine in FF & IE though.
Thanks for the fantastic ideas, simple, effective, and always an eye for aesthetics. Mary Lou, you rock!
It would be nice to see more positive feedback from users for all your work and dedication to open source. Correct me if I’m wrong, but Blueprints aren’t designed to be perfect as the description “easy adaption and usage, or simply for inspiration” implies. I would like to see more links to code adaptations, refactorings, and bug fixes from users who have implemented code presented here.
Mary Lou, it would help us help you if your team would post more frequently to github.
Seriously, thanks for all your time and effort to better the interwebs.
this blueprint stuff is great . tanks a lot
This is perfect for a site I want to create, how do I add text/content to the sections? Do I need to put it on the background images?
This is fantastic! Thank you so much. I have a question though.. If I use this entire code within a container DIV…. the fixed background is CONTAINED within the width of the parent div. Is there a way for the fixed background sections to OVERFLOW out of the parent div? This article shows the style that I am talking about!
http://www.polygon.com/2013/1/17/3882754/oswald-epic-mickey-disney
Hi Mary Lou, first at all great job!
At second i have to question you one thing. Where did you declare the variable $section? I don´t understand how could you use $section.index( ‘section’ );
i don´t found on Internet any info about that kind of declaration. If u could give me the name approached of this technique.
Thank u and sorry for my english.
See u.
This is really awesome….
is there anyway to modify the scroll effect?
Is there a way to put videos as the background instead of images?
this is like a breath of fresh air love this blueprint..
Hey, I’m trying to wrap the a tags in a list so I can control them better, how can I change the JS to reflect the nav a are now nav ul li a? I can’t get it to work 🙁
Hi I was wondering if it was possible to make the menu a horizontal menu?
This is a really great blueprint, I’ve really enjoyed it. I have had one issue, and I’m sure I just have something set wrong, but when I scroll all the way to the bottom of the page, then back up, my second and fourth background images disappear. Does anyone have any thoughts on what I might be doing wrong?
Thanks!
Absolutely Love it!
I finally was able to create the blog design I’ve been dreaming of for quite some time.
Thanks a lot for this fantastic blueprint!
Is there a way to make ‘previous and next’ buttons instead of the bullets (for when there a many pages/sections)?
MAN. YOU ARE AWESOME. GREAT WORK. WONDERFUL PIECE. THANKS FOR THE BLUEPRINT. GOT ALL I NEED.
Hi, I came across your post while looking for a fixed background one page website & your tutorial is great! What I would like to know but have not come across yet is, how can we make the background totally static? meaning to say the bird background does not move as you scroll through & the other pages are maybe enclosed with a DIV that has a transparent background? I ask this as I am a beginner so forgive me if this answer is obvious.
Thank you,
Su
Cool!
is there a way to tweak the .js so that you wont see more than one section at a time?
Thanks, Nice Job..
Would there be a way to achieve this effect using inline img tags instead of background images for each section? I can’t seem to find any examples out there at all. And wondering if its even possible.
Quick question. How do I make this unordered list of dots horizontal? Simply add a ‘display: inline’ somewhere to the CSS? Forgive me, I’m away from my laptop so I can’t play around with the code — I’m reading this from my tablet. Would changes to the jQuery be necessary? I love the simplicity but would like the same vertical scrolling with a horizontal navigation centered at the TOP of the page.
Also, how does one get the page to open (start) at the bottom and scroll up instead of down?
Any guidance appreciated! Thanks much!
I’ve been longing to use this on a project for years now. I’ll be able to do it now. Thanks for the tut!
Hi,
I am so thankful to have found You.
I am really new at code writing and I was wondering if there is just an html and css version of several of these awesome effects?
for example the Slide and Push Menus, Fixed Background scrolling, On scroll animated Header and the On Scroll Effect Layout…
The Javascript intimidates me a bit. Not very familiar and a bit confusing honestly.
I am learning the transform and transition effects in css.. Would these be possible candidates?
Any Help Would Be Greatly Appreciated.
Thanks For Your Valuable Time.
Awesome Work!!
Awesome work thanks 😀