Interacitve Parallax Effect For Multi-layer Elements - MoveParallax

Just another mouse movement parallax jQuery plugin to creating an interactive parallax effect on multi-layer images by moving background perspective on mouse move.

How It Works:

// Calculate the perspective of each layer depending on the position of the mouse (BC) relative to the center of the composition
//   A
//   |\
//   | \
//   |  \
//  D|___\E ← move parallax layer
//   |    \
//   |_____\ ← mouse deviation from the centre
//   B      C

How to use it:

1. Add parallax layers to the parallax container and determine the perspective depth in the HTML data attribute as follows:

<div class="parallax">
  <div class="parallax-layer layer_1" data-perspective-depth="10">
    <div class="layer__item item_1"></div>
  </div>
  <div class="parallax-layer layer_2" data-perspective-depth="30">
    <div class="layer__item item_1"></div>
  </div>
  <div class="parallax-layer layer_3" data-perspective-depth="90">
    <div class="layer__item item_1"></div>
  </div>
</div>

2. Load the main JavaScript after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/index.js"></script>

3. The example CSS.

.parallax {
  overflow: hidden;
}

body .parallax {
  position: relative;
}

body .parallax .parallax-layer {
  position: absolute;
  transition-duration: 500ms;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body .parallax .parallax-layer .layer__item {
  position: absolute;
}

body .parallax .position_t_l {
  top: 0;
  left: 0;
}

body .parallax .position_t_c {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

body .parallax .position_t_r {
  top: 0;
  right: 0;
}

body .parallax .position_m_l {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

body .parallax .position_m_c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body .parallax .position_m_r {
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

body .parallax .position_b_l {
  bottom: 0;
  left: 0;
}

body .parallax .position_b_c {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

body .parallax .position_b_r {
  bottom: 0;
  right: 0;
}

.parallax {
  width: 1301px;
  height: 867px;
  border: 2px solid red;
}

.parallax .parallax-layer {
  width: 1301px;
  height: 867px;
}

.parallax .layer_1 .item_1 {
  width: 900px;
  height: 219px;
}

.parallax .layer_2 .item_1 {
  width: 1166px;
  height: 436px;
}

.parallax .layer_3 .item_1 {
  width: 676px;
  height: 277px;
}

.parallax {
  background: URL("./img/0_layer.png") center center no-repeat;
}

.parallax .layer_1 .item_1 {
  background: URL("./img/1_layer.png") center center no-repeat;
}

.parallax .layer_2 .item_1 {
  background: URL("./img/2_layer.png") center center no-repeat;
}

.parallax .layer_3 .item_1 {
  background: URL("./img/3_layer.png") center center no-repeat;
}

.parallax .layer_1 .item_1 {
  bottom: 580px;
  left: 115px;
}

.parallax .layer_2 .item_1 {
  bottom: 205px;
  left: -235px;
}

.parallax .layer_3 .item_1 {
  bottom: 225px;
  left: 805px;
}

---

This awesome jQuery plugin is developed by SadCat88. For more Advanced Usages, please check the demo page or visit the official website.