Zepto Parallax Plugin

by Ayyappan Sakthivadivel

HTML

<div class="container">
    <div class="text">
      <h1> ERROR 404 </h1>
      <h2>ohh shit</h2>
    </div>
    <ul id="clouds">
      <li class="layer sidecloud" data-depth="0.70"><img class="cloud1" src="http://www.veryicon.com/icon/png/System/iOS7%20Minimal/Weather%20Clouds.png"></li>
      <li class="layer topcloud" data-depth="2"><img class="cloud2" src="http://www.veryicon.com/icon/png/System/iOS7%20Minimal/Weather%20Clouds.png"></li>
      <li class="layer bottomcloud" data-depth="4"><img class="cloud3" src="http://www.veryicon.com/icon/png/System/iOS7%20Minimal/Weather%20Clouds.png"></li>
    </ul>
  </div>

CSS

body{
  background: #008DC8;
}
.container {
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: hidden !important;

}


h1 {
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-size: 75px;
  letter-spacing: 20px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  margin: 0px;
  padding: 0px;
}
h2 {
  font-family: Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 20px;
  text-transform: uppercase;
  text-align: center;
  color:white;
  line-height: 50px;
  padding: 0px;
  margin: 0px;
}
h2 a {
  color: white;
  text-decoration: none;
  border-bottom: 5px solid #B5B5B5;
  margin: 0;
  padding: 0;
}
h2 a span {
  letter-spacing: 0px !important;
  padding-right: 3px;
}
h2 a:hover {
  color: #808080;
  border-bottom: 5px solid #808080;
}
ul {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  position: relative;
}
.text {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  z-index: 3;
  display: block;
}
.topcloud {
    position: absolute;
    z-index: 2;
    margin-top: -10%;
    margin-left: 20%;
}
.bottomcloud {
    position: absolute;
    z-index: 1;
    margin-top: -20%;
    margin-left: 80%;
}
.sidecloud {
  position: absolute;
  z-index: 1;
    margin-top:10%;
        margin-left: 50%;
}

JavaScript

/**
 * jQuery || Zepto Parallax Plugin
 * @author Matthew Wagerfield - @wagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
;(function($, window, document, undefined) {

  // Strict Mode
  'use strict';

  // Constants
  var NAME = 'parallax';
  var MAGIC_NUMBER = 30;
  var DEFAULTS = {
    relativeInput: true,
    clipRelativeInput: false,
    calibrationThreshold: 100,
    calibrationDelay: 500,
    supportDelay: 500,
    calibrateX: false,
    calibrateY: false,
    invertX: true,
    invertY: true,
    limitX: false,
    limitY: false,
    scalarX: 10.0,
    scalarY: 10.0,
    frictionX: 0.1,
    frictionY: 0.1,
    originX: 0.5,
    originY: 0.5
  };

  function Plugin(element, options) {

    // DOM Context
    this.element = element;

    // Selections
    this.$context = $(element).data('api', this);
    this.$layers = this.$context.find('.layer');

    // Data Extraction
    var data = {
      calibrateX: this.$context.data('calibrate-x') || null,
      calibrateY: this.$context.data('calibrate-y') || null,
      invertX: this.$context.data('invert-x') || null,
      invertY: this.$context.data('invert-y') || null,
      limitX: parseFloat(this.$context.data('limit-x')) || null,
      limitY: parseFloat(this.$context.data('limit-y')) || null,
      scalarX: parseFloat(this.$context.data('scalar-x')) || null,
      scalarY: parseFloat(this.$context.data('scalar-y')) || null,
      frictionX: parseFloat(this.$context.data('friction-x')) || null,
      frictionY: parseFloat(this.$context.data('friction-y')) || null,
      originX: parseFloat(this.$context.data('origin-x')) || null,
      originY: parseFloat(this.$context.data('origin-y')) || null
    };

    // Delete Null Data Values
    for (var key in data) {
      if (data[key] === null) delete data[key];
    }

    //...