A Pen by Captain Anonymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

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

A Pen by Secret Sam on CodePen.

License.

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>

style.scss

@import "compass";
// 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);
}