Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>
<div class="squares">
  <div class="square1"></div>
  <div class="square2"></div>
  <div class="square3"></div>  
  <div class="square4"></div>  
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

@import "compass";

@mixin parallax-init {
  html, body {
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    @include perspective(1px);
    @include transform-style(preserve-3d);
  }
}

@mixin parallax($distance: 0) {
  @include transform(
    translateZ($distance * 1px)
    scale(1 - $distance)
  );
}

///////////////////////////////

@include parallax-init;

.squares {
  text-align: center;
  font-size: 0;
}

.square1, .square2, .square3, .square4 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  display: inline-block;
}

.square1 {
  @include parallax(-0.7);
  background: red;
}

.square2 {
  @include parallax(-.2);
  background: yellow;
}

.square4 {
  @include parallax(0.5);
  background: green;
}

SassMeister-output.css

html, body {
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  -moz-perspective: 1px;
  -webkit-perspective: 1px;
  perspective: 1px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.squares {
  text-align: center;
  font-size: 0;
}

.square1, .square2, .square3, .square4 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  display: inline-block;
}

.square1 {
  -moz-transform: translateZ(-0.7px) scale(1.7);
  -ms-transform: translateZ(-0.7px) scale(1.7);
  -o-transform: translateZ(-0.7px) scale(1.7);
  -webkit-transform: translateZ(-0.7px) scale(1.7);
  transform: translateZ(-0.7px) scale(1.7);
  background: red;
}

.square2 {
  -moz-transform: translateZ(-0.2px) scale(1.2);
  -ms-transform: translateZ(-0.2px) scale(1.2);
  -o-transform: translateZ(-0.2px) scale(1.2);
  -webkit-transform: translateZ(-0.2px) scale(1.2);
  transform: translateZ(-0.2px) scale(1.2);
  background: yellow;
}

.square4 {
  -moz-transform: translateZ(0.5px) scale(0.5);
  -ms-transform: translateZ(0.5px) scale(0.5);
  -o-transform: translateZ(0.5px) scale(0.5);
  -webkit-transform: translateZ(0.5px) scale(0.5);
  transform: translateZ(0.5px) scale(0.5);
  background: green;
}

SassMeister-rendered.html

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>
<div class="squares">
  <div class="square1"></div>
  <div class="square2"></div>
  <div class="square3"></div>  
  <div class="square4"></div>  
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum pariatur veritatis quia non reprehenderit blanditiis saepe provident facilis nemo numquam doloribus ex aperiam iste voluptas quam illum quibusdam recusandae modi aspernatur esse nesciunt tempora fugit soluta exercitationem natus maxime inventore possimus? Veniam adipisci cupiditate similique voluptas dignissimos quod vitae? Accusamus beatae cumque sint reprehenderit mollitia debitis neque eos totam temporibus expedita accusantium numquam dignissimos earum nisi obcaecati voluptate odit sit pariatur eaque aspernatur nam voluptatem cupiditate facilis culpa animi tempora id illum omnis iste. Et neque voluptatem suscipit delectus nemo numquam sapiente eum dignissimos ducimus natus quo libero nisi incidunt accusantium sequi illo architecto nostrum minima minus voluptate consequuntur quidem obcaecati temporibus veniam aspernatur. Sapiente ipsam assumenda similique magnam quis possimus quaerat eum tenetur maiores. Repellendus fugiat beatae quasi doloribus aspernatur commodi unde provident sapiente. Enim earum ex iure totam ab dolores quo officia autem dignissimos perferendis quod ad esse beatae voluptates aliquam sequi similique omnis recusandae libero delectus quam. Repellat eius asperiores nihil libero in vero sapiente fugit temporibus expedita incidunt repellendus at qui consequatur sed ab id quidem odit mollitia reiciendis odio. Laborum repudiandae ipsa a quibusdam molestiae neque quo omnis eaque velit eum nobis quaerat illum vel.</p>