Touch-enabled 3D Parallax Effect – Farsight.js

Preview:

Description:

Farsight.js is a vanilla JavaScript library which applies touch-enabled 3D parallax (depth) effect to multiple layers you specify.

You’re able to switch between these layers with mouse wheel or touch swipe.

Dependencies:

• underscore.js
• Tweenlite.js+ScrollToPlugin

How to use it:

Create a group of layers in the page.

<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>

Create an empty DIV for the scene depth.

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

Load the Farsight.js library and other required JavaScript resources at the end of the document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/ScrollToPlugin.min.jss"></script>
<script src="js/farsight.js"></script>