How to recreate the new e-bay site scrolling effect

How to recreate the new e-bay site scrolling effect

by kazu69

HTML

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>

<meta charset="utf-8">

<meta name="description" content="A responsive layout with fancy scrolling effec" />
<meta name="keywords" content="responsive layout, scrolling effect" />
<meta name="author" content="PeHaa for Pepsizez" />
<title>From love for lavender</title>
<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
 
<body>
<header class=" content">
    <div class="wrapper">
    <h1>From love for lavender</h1>
    <p><span>Lavender</span> (botanic name Lavandula) is a genus of 39 species of flowering plants in the mint family, Lamiaceae. It is native to the Old World and is found from Cape Verde and the Canary Islands, southern Europe across to northern and eastern Africa, the Mediterranean, southwest Asia to southeast India.</p> 
    <p>Many members of the genus are cultivated extensively in temperate climates as ornamental plants for garden and landscape use, and also commercially for the extraction of essential oils.
    </p>
    </div>
</header>

<section class="content" id="oil">
    <div class="wrapper">
    <p><span>Lavender oil</span> is an essential oil obtained by distillation from the flower spikes of certain species of lavender.</p>
    <p>Lavender oil, which has long been used in the production of perfume, can also be used in aromatherapy. The scent has a calming effect which may aid in relaxation and the reduction of anxiety and stress.
    It may also help to relieve pain from tension headache when breathed in as vapor or diluted and rubbed on the skin. When added to a vaporizer, lavender oil may aid in the treatment of cough and respiratory infection.</p>
    </div>

</section>
<section class="content " id="culinary">
    <div class="wrapper">
    <p><span>Culinary use</span> Flowers yield abundant nectar from which bees make a...

CSS

.wrapper {
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

header:after {
    background-image: url("http://pepsized.com/wp-content/uploads/2012/11/lavender/images/lavenderbg1.jpg");
}
section:after, header:after {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) inset;
    content: "";
    display: block;
    height: 400px;
    width: 100%;
}

header .wrapper {
    padding: 100px 50px 100px 440px;
}
header .wrapper {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://pepsized.com/wp-content/uploads/2012/11/lavender/images/lavender1.jpg");
    background-origin: padding-box;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 33.9167% auto;
    padding: 8.33333% 4.16667% 8.33333% 36.6667%;
}
.wrapper {
    width: 1200px;
}
#oil:after {
    background-image: url("http://pepsized.com/wp-content/uploads/2012/11/lavender/images/lavenderbg2.jpg");
}

#oil .wrapper {
    padding: 120px 50px 120px 600px;
}

#culinary:after {
    background-image: url("http://pepsized.com/wp-content/uploads/2012/11/lavender/images/lavenderbg3.jpg");
}

#culinary .wrapper {
    padding: 120px 50px 120px 550px;
}

#dried:after {
    background-image: url("http://pepsized.com/wp-content/uploads/2012/11/lavender/images/lavenderbg4.jpg");
}

#dried .wrapper {
    padding: 120px 50px 120px 500px;
}

footer {
    background: none repeat scroll 0 0 lavender;
    padding: 8.33333% 3.33333%;
    text-align: center;
}