I have been experimenting with parallax, and knowing 0 javascript, I was happy to find it is possible with just CSS and Html. This is the code pen post that I think is best suited for my needs.
http://codepen.io/scottkellum/pen/bHEcA?editors=1100
I’ve made a simplified version where the parallax still works, with two elements going at different speeds.
(html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="div">
<div class="container">
<h1>Parallax</h1>
<h2>faster</h2>
</div>
</div>
</body>
</html>
(css)
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
overflow: auto;
perspective: 1px;
}
.container {
padding: 10%;
}
.container :nth-child(1) {
transform: translateZ(-0.4px) scale(1.0);
z-index: -200;
top: 300px;
left: 200px;
}
.container :nth-child(2) {
transform: translateZ(0.4px) scale(0.4);
z-index: 50;
top: 300px;
left: 500px;
}
.container > * {
position: absolute;
}
body {
font-family: Roboto,
sans-serif;
font-weight: 100;
background: #EEF1F3;
line-height: 1;
}
.div {
height: 1000px;
width: 100%;
}
h1, h2 {
font-weight: 100;
margin: 0;
}
h1 {
font-size: 3em;
color: #1586D1;
}
h2 {
font-size: 3em;
transform: translateZ(0.5px) scale(0.8);
z-index: 200;
}
Problem is, I have know idea why this works. I’ve played around with all of the properties, but still do not understand the fundamental mechanics behind it. Can someone explain it to me as simply as possible?
