Paralaje, traducir, escalar y atenuar animaciones en scroll-Parallax-JS

Vista prévia

Descripción

Una biblioteca de scroll de JavaScript paralaje de vainilla que aplica efectos de paralaje, traducir, escalar y difuminado a las imágenes en el desplazamiento de página.

Funcionamiento

Toastinette es un plugin de notificación JavaScript muy pequeño para mostrar los mensajes del brindis inspirados en material Design en la Página Web.

<script src="./src/parallax-js.js"></script>

Añada la clase paralaje y el atributo Data-paralaje a las imágenes de paralaje y, a continuación, insértelos en contenedores de paralaje de la siguiente manera:

<div class="parallax-container">

<img src="1.jpg" alt="Image 1" class="parallax" data-parallax>
</div>

<div class="parallax-container">

<img src="2.jpg" alt="Image 2" class="parallax" data-parallax>
</div>

...

Haga la imagen de paralaje absolutamente posicionada.

.parallax-container{

position: relative;

min-height: 100vh;

overflow: hidden;

margin-top: 1000px;

margin-bottom: 1000px;
}

.parallax{

position: absolute;
}

Aplica animaciones adicionales de traducir, escalar y difuminado a las imágenes del desplazamiento de la página.

<div class="parallax-container">

<img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-translate="true" data-scale="true" data-opacity="true">
</div>

Ajuste la velocidad de la animación (0-1).

<div class="parallax-container">

<img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-speed="1">
</div>

A veces es posible que necesites revertir el efecto de paralaje.

<div class="parallax-container">

<img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-reverse="true">
</div>