Skip to content

Instantly share code, notes, and snippets.

@hamstu
Created December 17, 2014 19:09
Show Gist options
  • Save hamstu/8ba1122b442b367e640e to your computer and use it in GitHub Desktop.
Save hamstu/8ba1122b442b367e640e to your computer and use it in GitHub Desktop.
Parallax Example: CSS
body {
background: #415a6c;
margin: 0;
font-family: 'Oswald';
}
.parallax-container {
position: fixed;
overflow: visible;
width: 100%;
height: 850px;
}
.parallax-layer {
width: 100%;
height: 500px;
position: fixed;
left: 0;
top: 0;
background-position: bottom center;
background-repeat: repeat-x;
background-size: 960px 253px;
}
.layer-0 {
top: 0;
z-index: 5;
background: #dbf0ff url('http://i.imgur.com/4hwp8up.png') no-repeat top 40px center;
background-size: 120px 138.5px;
}
.layer-1 {
top: -100px;
z-index: 5;
background-image: url('http://i.imgur.com/Ra2bzmb.png');
}
.layer-2 {
top: -50px;
z-index: 10;
background-image: url('http://i.imgur.com/jSOo9SK.png');
}
.layer-3 {
top: -10px;
z-index: 15;
background-image: url('http://i.imgur.com/DOZRBDj.png');
}
.layer-4 {
top: 65px;
z-index: 20;
background-image: url('http://i.imgur.com/JbSR9JY.png');
}
.layer-5 {
top: 150px;
z-index: 25;
background-image: url('http://i.imgur.com/Ti2mNxd.png');
}
.content {
position: absolute;
top: 600px;
background: #415a6c;
width: 100%;
min-height: 1500px;
}
.content h1 {
color: #fff;
font-size: 2em;
text-transform: uppercase;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment