A Pen by Hornebom.

index.html

<header class="header">
  <a href="#"><h1 class="logo">bullbull</h1></a>
  <ul class="main-nav">
    <li><a href="#">Profile</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>
<section class="content-wrapper">
  <article class="content-box intro">
    <span class="blind"></span>
    <span class="blind"></span>
    <span class="blind"></span>
    <span class="blind"></span>
    <span class="blind"></span>
    <span class="blind"></span>
    <h1>This is big stuff</h1>
  </article>
  <article class="content-box">
    <div class="left-col">
      <h2>Simple CSS Parallax Effect</h2>
      <p>When hovering the section above, the headline and the background slide horizontal - similar to a js based parallax. I used six absolute positioned spans (.blind) to get the position of the mouse. According to each position, the CSS of the following h1 and h1:after is changed. The idea is based on Fabrice Weinbergs concept of a <a href="http://codepen.io/FWeinb/pen/GrpqB" target="_blank">Direction aware hover pure CSS</a>.</p>
      <p>The layout is inspired by some dribbble shots of <a href="https://dribbble.com/lauralin" target="_blank">Laura</a> and the bull is taken from <a href="http://etc.usf.edu/clipart/" target="_blank">ClipArt ETC</a>.</p>
    </div>
    <div class="right-col">
      <img src="https://dl.dropboxusercontent.com/u/330966/static/parallax/cow_2.png" alt="" />
    </div>
  </article>
</section>
<footer class="footer">
  <p>Coded by <a href="http://codepen.io/Hornebom/" target="_blank">Hornebom</a> on a rainy saturday morning.</p>
</footer>

Simple-CSS-Parallax-Effect.markdown

Simple CSS Parallax Effect

Move your mouse over the big headline to see the effect. Coded just in CSS, no Js required

A Pen by Hornebom on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html, body {
  width:100%;
  height:100%;
  overflow-x:hidden;
}
body {
  font-family: 'Lato', sans-serif;
  color:#333;
  background:#e5e1d6;
}
a {color:#333;text-decoration:none;}
/*------------------------------------*/
/*Styling for header
/*------------------------------------*/
.header {
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  background-color:#84cfcb;
}
h1.logo {
  padding:0.5rem 1rem 0 1rem;
  font-weight:400;
  font-size:1.8rem;
  color:#e5e1d6;
}
.main-nav {
  text-align:right;
  list-style-type:none;
}
.main-nav li {
  display:inline-block;
}
.main-nav li a {
  display:inline-block;
  padding:1.5rem 1rem 0 1rem;
  font-size:1.2rem;
}
/*------------------------------------*/
/*Styling for Content
/*------------------------------------*/
.content-wrapper {
  width:100%;
}
.content-box {
  width:100%;
  padding:1rem;
  display:flex;
  flex-direction:row;
  justify-content:center;
}
.left-col,
.right-col {
  width:50%;
  max-width:40rem;
  flex-basis:50%;
  padding-top:2rem;
  padding-bottom:2rem;
}
.left-col {padding-right:1rem;}
.left-col {padding-left:1rem;}
h2 {
  margin-bottom:1rem;
  font-size:1.6rem;
  font-weight:900;
}
p {
  margin-bottom:1rem;
  font-size:1.2rem;
  line-height:1.6rem;
}
p a {border-bottom:1px solid rgba(51,51,51,0.3);}
p a:hover {border-bottom:1px solid rgba(51,51,51,0);}
img {
  display:block;
  max-width:100%;
  hheight:auto;
}
.intro {
  position:relative;
  height:50rem;
  text-align:center;
  background-image:linear-gradient(#e5e1d6, #e5e1d6);/* the box bottom left*/
  background-size:30% 4rem;
  background-position:0 100%;
  background-repeat:no-repeat;
}
/* yellow arrow above the box */
.intro:after {
  content: '\25BC';
  position:absolute;
  bottom:2%;
  left:12%;
  font-size:4rem;
  color:#fb962a;
}
/* 
the spans that serve as indicators 
to move the following h1 and background-image horizontal.
I just used 6, so the transition are not that smooth.
Adding more spans should give a real parallax effect.
*/
.intro .blind {
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  width:15%;
  background:none;
  speak:none;
}
.intro .blind:nth-child(1) {left:0;}
.intro .blind:nth-child(2) {left:15%;}
.intro .blind:nth-child(3) {left:30%;}
.intro .blind:nth-child(4) {right:30%;}
.intro .blind:nth-child(5) {right:15%;}
.intro .blind:nth-child(6) {right:0;}

.intro h1 {
  margin:auto;/* vertical and horizontal centring via flexbox */
  width:100%;
  max-width:50rem;
  padding-right:0;
  padding-left:0;
  color:#e5e1d6;
  font-size:10rem;
  text-transform:uppercase;
  letter-spacing:0.2rem;
  transition:padding-left 1.5s, padding-right 1.5s;
}
/*
Because centering the h1 via flexbox, 
I could't give it a fullsize background-image.
The pseudo content is absolute to .intro not to the h1
*/
.intro h1:after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:-1;
  background-color:#84cfcb;
  background-image:url(https://dl.dropboxusercontent.com/u/330966/static/parallax/cow_1.png);
  background-repeat:no-repeat;
  background-position:50% 50%;
  transition:background-position 1.5s;
}
/* this will move the h1 */
.intro .blind:nth-child(1):hover ~ h1 {padding-left:2.4rem;}
.intro .blind:nth-child(2):hover ~ h1 {padding-left:1.6rem;}
.intro .blind:nth-child(3):hover ~ h1 {padding-left:0.8rem;}
.intro .blind:nth-child(4):hover ~ h1 {padding-right:0.8rem;}
.intro .blind:nth-child(5):hover ~ h1 {padding-right:1.6rem;}
.intro .blind:nth-child(6):hover ~ h1 {padding-right:2.4rem;}
/* this will move the background-image */
.intro .blind:nth-child(1):hover ~ h1:after {background-position:56% 50%;}
.intro .blind:nth-child(2):hover ~ h1:after {background-position:54% 50%;}
.intro .blind:nth-child(3):hover ~ h1:after {background-position:52% 50%;}
.intro .blind:nth-child(4):hover ~ h1:after {background-position:48% 50%;}
.intro .blind:nth-child(5):hover ~ h1:after {background-position:46% 50%;}
.intro .blind:nth-child(6):hover ~ h1:after {background-position:44% 50%;}

.footer {
  width:100%;
  padding:3rem 1rem 2rem 1rem;
  background-color:#ce9f29;
  text-align:center;
}