A Pen by Secret Sam.

index.html

<div class="container">
  <h1>Parallax</h1>
  <h2>faster</h2>
  <h2>easier</h2>
  <h2>sassier</h2>
  <img src="http://placekitten.com/200/200" alt=" " />
  <img src="http://placekitten.com/150/200" alt=" " />
  <img src="http://placekitten.com/200/150" alt=" " />
  <img src="http://placekitten.com/150/250" alt=" " />
  <img src="http://placekitten.com/300/400" alt=" " />
  <img src="http://placekitten.com/400/300" alt=" " />
</div>

Sass-parallax-example.markdown

Sass parallax example

By locking the perspective on the body element and transforming elements in 3D on top of that, you can easily create parallax scrolling effects that don’t require JavaScript and can be much more performant as a result. Mixins can be found here: http://codepen.io/scottkellum/pen/Jwudg

Forked from Scott Kellum's Pen Sass parallax example.

A Pen by Secret Sam on CodePen.

License.

style.scss

@import "compass/css3";
// Magic parallax mixins

$parallax-perspective : 1 !default;
$parallax-element     : "body" !default;
$parallax-ios         : true !default;

@mixin parallax-init(
  $perspective  : $parallax-perspective,
  $element      : $parallax-element,
  $parallax-ios : $parallax-ios
  ) {
  @if $element == "body" {
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  }
  #{$element} {
    overflow: auto;
    @include perspective($perspective * 1px);
    @include transform-style(preserve-3d);
    // Allows for smooth scrolling but disables parallax effects.
    @if $parallax-ios == false {
      -webkit-overflow-scrolling: touch;
    }
    // Preserve 3D
    &, * {
      @include transform-style(preserve-3d);
    }
  }
}

@mixin parallax(
  $distance    : 0,
  $perspective : $parallax-perspective
  ) {
  @include transform(
    translateZ($distance * $perspective * 1px)
    scale(abs($distance - 1))
  );
  z-index: $distance * 1000;
}

// End of magic parallax mixins




@import url(http://fonts.googleapis.com/css?family=Roboto:100);
$primary: #1586D1;

@include parallax-init;

.container {
  :nth-child(1) {
    @include parallax(-.4);
    top: 200px;
    left: 200px;
  }
  :nth-child(1) {
    @include parallax(-.4);
    top: 200px;
    left: 200px;
  }
  :nth-child(1) {
    @include parallax(-.4);
    top: 200px;
    left: 200px;
  }
  :nth-child(2) {
    @include parallax(.2);
    top: 200px;
    left: 500px;
  }
  :nth-child(3) {
    @include parallax(.3);
    top: 400px;
    left: 600px;
  }
  :nth-child(4) {
    @include parallax(.1);
    top: 500px;
    left: 500px;
  }
  :nth-child(5) {
    @include parallax(-2);
    top: 2000px;
    left: 2000px;
  }
  :nth-child(6) {
    @include parallax(.4);
    top: 600px;
    left: 300px;
  }
  :nth-child(7) {
    @include parallax(-1);
    top: 400px;
    left: 1000px;
  }
  :nth-child(8) {
    @include parallax(-.4);
    top: 100px;
    left: 1400px;
  }
  :nth-child(9) {
    @include parallax(.4);
    top: 900px;
    left: 500px;
  }
  :nth-child(10) {
    @include parallax(-1);
    top: 1600px;
    left: 100px;
  }
  padding: 10%;
  max-width: 40em;
  margin: auto;
  > * {
    position: absolute;
  }
}

body {
  font-family: Roboto, sans-serif;
  font-weight: 100;
  background: #EEF1F3;
  line-height: 1;
}

h1, h2 {
  font-weight: 100;
  margin: 0;
}

h1 {
  font-size: 5em;
  color: $primary;
}
h2 {
  font-size: 3em;
  @include parallax(.2);
}