Animación de desplazamiento suave con JavaScript y CSS-Rock & #8217; n & #8217; roll

Vista prévia

Descripción

Un JavaScript puro & implementación CSS de efectos de desplazamiento suave para imágenes de fondo. Licenciado como Apache License 2,0 por cubic Creative Company Limited.

Scrolling effects included:

• Paralaje
• Zoom
• Desenfoque
• Se descolora

Funcionamiento

Descargue el Rock'n ' roll, descomprímelo y, a continuación, incluya CB-RNR-min. CSS y CB-RNR-min. js en el archivo HTML.

<link href="minified/cb-rnr-min.css" rel="stylesheet">
<script src="minified/cb-rnr-min.js"></script>

El marcado. Agregue una imagen de fondo a un contenedor que desee animar al desplazar y envolver el contenedor en un elemento DIV con la clase CSS ' RNR '. La clase ' RNR-page ' se utiliza para expandir la altura al tamaño de la ventana gráfica.

<div class="rnr rnr-page">

<div class="rnr-bg" style="background-image: url(demo.jpg);"></div>
</div>

Los modificadores CSS para pecificar el efecto de desplazamiento.

• rnr-para: Paralaje
• RNR-zoom: zoom
• rnr-blur: Desenfoque
• rnr-fade: Se descolora

<div class="rnr rnr-page">

<div class="rnr-bg rnr-para" style="background-image: url(demo.jpg);"></div>
</div>

Cambiar la relación de desplazamiento:

<div class="rnr rnr-page">

<div class="rnr-bg rnr-scroll rnr-para" rnr-scroll-ratio="0.5" style="background-image: url(demo.jpg);"></div>
</div>

Cambie el desplazamiento que desencadena el efecto de desplazamiento.

<div class="rnr rnr-page">

<div class="rnr-bg rnr-scroll rnr-para" rnr-scroll-offset="1" style="background-image: url(demo.jpg);"></div>
</div>

Registro de cambios

08/01/2018

• v0.9.2