Efecto de paralaje 3D con función táctil-FarSight. js

Vista prévia

Descripción

FarSight. js es una biblioteca de JavaScript Vanilla que aplica el efecto táctil 3D paralaje (Depth) a varias capas que especifique.

Puedes alternar entre estas capas con la rueda del ratón o con el deslizamiento táctil.

Dependencies:

• < a href = "http:/subscorejs.org/" target = "_ blank" rel = "noopener" > subrayado. js
• < a href = "https://greensock.com/tweenlite" > Tweenlite. js + ScrollToPlugin

Funcionamiento

Cree un grupo de capas en la página.

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

Cree un DIV vacío para la profundidad de la escena.

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

Cargue la biblioteca de FarSight. js y otros recursos de JavaScript necesarios al final del documento.

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