ScrollReveal.js es una biblioteca de animación javascript liviana que responde completamente en todos los dispositivos y navegadores. Le permite agregar algo de sabor a las páginas web y sitios de portafolios que de otro modo serían aburridos. La biblioteca tiene solo 3 Kb de tamaño si se minimiza y no requiere dependencias, por lo que la instalación en sitios web nuevos o existentes es rápida y fácil. Antes de entrar en la instalación, hablemos de todas las increíbles animaciones que puede hacer.
Puede hacer que cualquier elemento HTML se desvanezca desde cualquier dirección, distancia, duración o estilo de relajación. Por defecto, las animaciones comenzarán a desvanecerse desde la parte inferior a una distancia de 20px. Cualquier distancia CSS válida se puede usar, por ejemplo, rem,%, vw y px. La ubicación inicial, la escala, la distancia, la duración y la aceleración son completamente personalizables y fáciles de ajustar. Este sitio web es un gran ejemplo de las diferentes animaciones.
Hay varias maneras diferentes de instalar la biblioteca que puede encontrar en la documentación, pero el método más simple para ponerlo en funcionamiento es simplemente incluir el enlace provisto en la documentación antes de cerrar la etiqueta corporal HTML.
<script src = "https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"> </ script>
También hay una opción para instalar con npm y bower, si lo prefiere. Una vez instalado, selecciona los elementos HTML que te gustaría manipular y crea una clase CSS en esos elementos.
<! - HTML -><div class = "reveal"> Cosas interesantes </ div>
En su archivo javascript, incluya el siguiente código para inicializar la biblioteca.
window.sr = ScrollReveal ();sr.reveal ('.velar');
¡Felicidades! ¡La animación predeterminada debería estar ahora en funcionamiento! Aquí está la funcionalidad que viene integrada.

// 'bottom', 'left', 'top', 'right'
origin: 'bottom',

// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
distance: '20px',

// Time in milliseconds.
duration: 500,
delay: 0,

// Starting angles in degrees, will transition from these values to 0 in all axes.
rotate: { x: 0, y: 0, z: 0 },

// Starting opacity value, before transitioning to the computed opacity.
opacity: 0,

// Starting scale value, will transition from this value to 1
scale: 0.9,

// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',

// `<html>` is the default reveal container. You can pass either:
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'
container: window.document.documentElement,

// true/false to control reveal animations on mobile.
mobile: true,

// true:  reveals occur every time elements become visible
// false: reveals occur once as elements become visible
reset: false,

// 'always' — delay for all reveal animations
// 'once'   — delay only the first time reveals occur
// 'onload' - delay only for animations triggered by first load
useDelay: 'always',

// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.2,

// Pixel values that alter the container boundaries.
// e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
// --
// Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },

// Callbacks that fire for each triggered element reveal, and reset.
beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},

// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}
 
 
¡Ahora para algo de personalización! En su archivo javascript, incluya un objeto javascript que coincida con el nombre de su clase ScrollReveal y ajuste la funcionalidad con las palabras clave incluidas en la documentación. Digamos que le gustaría tener un retraso más largo y una ubicación de origen de izquierda en lugar de inferior. Esto es lo que se vería.

const reveal = {
  origin : 'left',
  delay    : 200,
  distance : '120px',
  easing   : 'ease-in-out',
};

Estas animaciones también se pueden reutilizar en cualquier elemento que desee. Si desea tener el mismo en cada div en su sitio, ¡no hay problema!

¡También puedes hacer animaciones secuenciadas! Esto se puede lograr pasando un intervalo de secuencia a su método. Asegúrese de no confundirse entre el tiempo de duración de la animación y el intervalo de tiempo de la secuencia. 


window.sr = ScrollReveal({ duration: 2000 });
sr.reveal('.box', 50);
 
En este ejemplo, ambas duraciones son en milisegundos. 50 es la secuencia de revelar y 2000 es la duración. Estas son solo algunas de las cosas increíbles que puedes hacer con ScrollReveal.js. Con
 su ligereza y sencillez de instalar, es una de las mejores bibliotecas 
de JavaScript para crear animaciones de desplazamiento.