3D Layered Parallax Effect With jQuery And CSS3

A layered parallax effect which uses JavaScript and CSS3 3D transforms to create an interactive multi-layered parallax card with depth reacting to the mouse move. Similar to the Apple tvOS's poster parallax effect.

See also:

• Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus
• tvOS Inspired Interactive Parallax Effect with jQuery and CSS3 - Media Poster
• tvOS Hover Parallax Effect With jQuery and CSS3 - TVParallax
• Interactive 3D Parallax Effect With jQuery And CSS3 - face-cursor.js

How to use it:

1. Create a moving zone that consists of two distinct layers that come together to form a single image.

<div class="moving-zone">
  <div class="layer"> 
    <img class="margin" src="image-1.jpg">
    <div class="moving-zone-2">
      <div class="layer-2"> 
      <img src="image-2.jpg"> </div>
    </div>
  </div>
</div>

2. The required CSS/CSS3 rules.

.moving-zone {
  position: relative;
  width: 85%;
  height: 985%;
  margin: auto;
  perspective: 800px;
}

.layer {
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transform-style: preserve-3d;
}

.layer-2 {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  transform-style: preserve-3d;
  left: 20%;
  top: 0% !important;
  transform: translateZ(100px) !important;
}

.layer-2 img { overflow: hidden; }

3. Load the latest version of jQuery JavaScript library at the end of the html document.

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script> 

4. The JavaScript to active the 3D layered parallax effect.

var moveForce = 30;
var rotateForce = 20;

$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height(); 
    
    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
    
    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
    
    $('.layer')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');

    $('.layer-2')
        .css('right', moveX+'px')
        .css('bottom', moveY+'px')
        .css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)');
});

---

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