Author: | iamryanyu |
---|---|
Views Total: | 572 views |
Official Page: | Go to website |
Last Update: | May 2, 2018 |
License: |
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:
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>