Touch-enabled 3D Parallax Effect – Farsight.js

Category: Image | May 2, 2018
Views Total:637 views
Official Page:Go to website
Last Update:May 2, 2018


Touch-enabled 3D Parallax Effect – Farsight.js


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.


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 id="layer2" class="layer" data-depth="500">
      <h1>Layer 2</h1>
  <div id="layer3" class="layer" data-depth="1000">
      <h1>Layer 3</h1>
  <div id="layer4" class="layer" data-depth="1500">
      <h1>Layer 4</h1>
  <div id="layer5" class="layer" data-depth="2000">
      <h1>Layer 5</h1>
  <div id="layer6" class="layer" data-depth="2500">
      <h1>Layer 6</h1>

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=""></script>
<script src=""></script>
<script src=""></script>
<script src="js/farsight.js"></script>

You Might Be Interested In:

Leave a Reply