<html>
<head>
<meta charset="UTF-8">
<title>Parallax Test</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="first"></div>
<div class="moon"></div>
<div class="second">
<p>It's just distance that separates us; or are we really ethnocentrically inclined? Go tell all your friends that this is the end. My soul felt so safe up here, no self-centered natives destroying our Earth. Let's announce embargos and denounce our far foes! I just fell from the mothership, they said that your answers are always lying on the ocean bed. I just fell from the mothership, they said that your answers are always lying on the ocean bed. Tonight, I'm wide awake! There's something in the air tonight. And I'll scream with a thousand voices... I am sane!</p>
</div>
<div class="third"></div>
<h1 class="title">
Apollo 11
</h1>
</body>
</html>body {
padding: 0;
margin: 0;
font-family: "Open sans", "Arial", sans-serif;
background: #222;
}
.first,
.second,
.third {
position: absolute;
width: 100%;
height: 100%;
background: #111;
background-image: url('http://static1.nexusmods.com/15/mods/120/images/442-2-1226780166.jpg');
background-position: center center;
background-size: cover;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.second {
top: 100%;
z-index: 1;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/2f/Apollo_17_Cernan_on_moon.jpg');
}
.second p {
position: relative;
max-width: 400px;
margin: 400px auto 0;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.third {
top: 200%;
background-attachment: fixed;
background-image: url('http://photos.imageevent.com/afap/spaceandscience/apollo11//apollo11_eva1.jpg');
}
.moon {
position: fixed;
top: 20%;
left: 50%;
width: 275px;
height: 275px;
margin-left: -132px;
background: #fff;
background: url('http://i.space.com/images/i/000/005/644/i02/moon-watching-night-100916-02.jpg');
background-position: center center;
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.title {
position: absolute;
top: 288%;
display: block;
width: 100%;
padding: 0.5em 0;
font-weight: 100;
color: #222;
text-align: center;
background: rgba(255, 255, 255, 0.7);
}
External CSS
This Pen doesn't use any external CSS resources.