<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>

// 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;
    perspective: $perspective * 1px;
    transform-style: preserve-3d;
    // Allows for smooth scrolling but disables parallax effects.
    @if $parallax-ios == false {
      -webkit-overflow-scrolling: touch;
    }
    // Preserve 3D
    &, * {
      transform-style: preserve-3d;
    }
  }
}

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

// End of magic parallax mixins




@import url(https://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(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);
}