In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css.
Step 1 – Prerequisities
We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px.
Step 2 – Html
The markup is simple. The content of each part is wrapped in a div with a class “wrapper” which is contained within a section or the header (for the introductory part).
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>From love for lavender</title>
...
</head>
<body>
<header class=" content">
<div class="wrapper">
<h1>From love for lavender</h1>
<p><span>Lavender</span> (botanic name Lavandula) is a ....
</p>
</div>
</header>
<section class="content" id="oil">
<div class="wrapper">
<p><span>Lavender oil</span> is an ... </p>
</div>
</section>
...
<footer>
<div class=wrapper>
"From love for lavender" has been built ...
</div>
</footer>
</body>
</html>Step 3 – basic css
The wrapper class is defined as follows. The box-sizing property allows to alter the default CSS box model, i.e. content-box model, where the width and height properties are measured including only the content. If we set box-sizing to border box, the width and height include the padding and border.
.wrapper {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }Since we want each section and the header to behave responsively, we’ll use only percent units. For example : the background image for the first section in 500px width, which represents 500px/1200px x 100% = 41.66667%
#oil .wrapper {
background: url(../images/lavender2.jpg) 4.16667% center no-repeat;
padding: 10% 4.16667% 10% 50%;
background-size: 41.66667% auto;}The value of 4.16667% corresponds to 50px when the wrapper has its maximum width.
We’ll treat the case of larger monitors with a media query :
@media only screen and (min-width: 1200px) {
.wrapper {
width:1200px; }
........
#oil .wrapper {
padding: 120px 50px 120px 600px; }You’ll find the complete stylesheet in the download files.
Step 4 – the scrolling effect
We don’t use any Javascript, our scrolling effect is obtained purely with css. We don’t want any additional markup, so we will use the :after pseudo-elements. They’ll be positioned below each section and covered with the background image. We will set the background-attachment property to fixed. We’ll also add sole inner shadow to give the illusion of depth :
section:after, header:after {
content: "";
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }We just have to assign the background image to each section
header:after {
background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
background-image: url(../images/lavenderbg4.jpg); }Step 5 – last tweaks
Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-device-width: 320px) and (max-device-width: 480px) {
section:after, header:after {
background-attachment: scroll; }
}We will also scale down the font-size for smaller monitors
@media only screen and (max-width: 600px) {
body {
font-size: .75em; }
}And that’s it! I hope you’ll find this technique useful, don’t hesitate to go further – this tutorial is just an inspiration. Looking forward to your comments. Thanks.
Terms of use :
You may use the effects demonstrated in tutorials in your own work, both commercial or non-commercial without any attribution. You may not reproduce entire nor large parts of our tutorials. The outcome of our tutorials may not be re-saled nor redistributed.