CSS Parallax Header Image

CSS Parallax Header Image.markdown

CSS Parallax Header Image

A Pen by Bennett Feely on CodePen.

License.

index.html

<main>
  <header>
  </header>
  <section>
    <h1>CSS Parallax Header Image</h1>
    <p>This demo uses a <a href="http://keithclark.co.uk/articles/pure-css-parallax-websites/">method discovered by Keith Clark</a> to create parallax effects in CSS, without a ton of janky Javascript and bloated jQuery plugins. </p>
  </section>
</main>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$scroll-factor : .5;

$background: #333;
$header-height : 50px;
$image : "https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large";

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:100,300,400,500,700,800,900,500italic,400italic,100italic,900italic,300italic,700italic,800italic);

* { box-sizing: border-box; margin: 0; padding: 0; border: 0; }

main {
  height: 150vh;
  max-height: 100%;
  overflow-x: hidden;
  perspective: 1px;
  perspective-origin: center top;
  transform-style: preserve-3d;
  padding: 0 40px;
  font: 36px/1.6 Alegreya Sans, serif;
}

header {
  height: 80vh;
  background: url($image);
  background-size: cover;
  background-position: center center;
  position: relative;
  vertical-align: top;
  transform-origin: center top;
  transform: 
    translateZ(-#{$scroll-factor * 2}px)
    scale(1 + $scroll-factor * 2);
}

section {
  min-height: 200vh;
  background: white;
  transform: translateZ(0);
  padding: 10px 0;
}

h1 {
  font-size: 30px;
  font-weight: 400;
  padding: 10px 20px;
}

p {
  font-size: 18px;
  font-size: 300;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: dodgerblue;
}




html, body { height: 100%; }

body {
  background: $background;
}