paralax banner

by John Doe

HTML

<div class="add_cont">
  <div class="add">
    <div data-depth="0.10" class="roller img layer"></div>
    <div data-depth="0.15" class="fifth img layer"></div>
    <div data-depth="0.2" class="phone img layer"></div>
    <div data-depth="0.25" class="clock img layer"></div>
    <div data-depth="0.1" class="three img layer"></div>
    <div data-depth="0.15" class="two img layer"></div>
  </div>
  <div class="cont">
    <div class="cont-wrap">
      <span>lorem</span>
      <p>
        <button onclick="alert('lorem')">button</button>
      </p>
    </div>
  </div>
</div>

CSS

.add_cont{
  position: relative;
}
.add{
  width: 560px;
  height: 196px;
  display: block;
  position: relative;
}
.img{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 560px;
  height: 196px;
  background-repeat: no-repeat;
  background-position: 100% auto;
}
/*
.img{
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 100% auto;
  
}

.roller{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/roller.jpg');
  width: 108px;
  height: 143px;
  top: 30px;
  left: 15px;
}
.clock{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/clock.jpg');
  width: 60px;
  height: 69px;
  top: 100px;
  right: 125px;
}
.phone{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/banner.jpg');
  width: 146px;
  height: 153px;
  top: 30px;
  right: 15px;
}
.fifth{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/fifth.jpg');
  width: 36px;
  height: 37px;
  top: 70px;
  left: 68px;
}
.two{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/two.jpg');
  width: 36px;
  height: 37px;
  top: 95px;
  right: 100px;
}
.three{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/three.jpg');
  width: 36px;
  height: 37px;
  top: 35px;
  right: 28px;
}*/




.roller{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/r.png');
}
.phone{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/p.png');
}
.clock{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/c.png');
}
.fifth{
  background-image: url('http://tetoesvakolat.hu/wp-content/themes/tetovakolat/assets/img/banner/f.png');
}
.three{
  background-image:...

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];
    }

    //...