3D Multi-layer Parallax Slider With jQuery

A fancy mobile-compatible slider that enables the user to scroll through a group of layers with awesome 3D parallax (depth) effects. Also supports touch swipe events on mobile devices.

How to use it:

1. Insert an group of DIV layers into the slider.

<div class="scene">

  <div id="layer1" class="layer" data-depth="0">
      <h1>Layer 1</h1>
  </div>

  <div id="layer2" class="layer" data-depth="500">
      <h1>Layer 2</h1>
  </div>

  <div id="layer3" class="layer" data-depth="1000">
      <h1>Layer 3</h1>
  </div>

  <div id="layer4" class="layer" data-depth="1500">
      <h1>Layer 4</h1>
  </div>

  <div id="layer5" class="layer" data-depth="2000">
      <h1>Layer 5</h1>
  </div>

  <div id="layer6" class="layer" data-depth="2500">
      <h1>Layer 6</h1>
  </div>

</div>

2. Create an empty element for the depth effect.

<div class="scene__depth"></div>

3. Load the necessary JavaScript and CSS files in the document. That's it.

<link type="text/css" rel="stylesheet" href="css/index.css">
script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
<script src="js/utils.js"></script>
<script src="js/zoom.js"></script>

---

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