Mostrar animaciones declarativas en desplazamiento-scrollReveal. js
| Autor: | julianlloyd |
|---|---|
| Views Total: | 5,927 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 27, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
scrollReveal. js es una biblioteca JavaScript simple pero sorprendente que revela elementos HTML invisibles con transiciones de fundido mientras se desplaza hacia abajo en la página y los elementos HTML invisibles están en la ventanilla.
Funcionamiento
Incluya la biblioteca scrollReveal. js necesaria al final del documento.
<script src="scrollReveal.js"></script>
Cree un elemento que desee animar.
<h1 class="demo">scrollReveal.js</h1> <p class="demo">Declarative on-scroll reveal animations.</p>
Inicializar con la configuración predeterminada.
ScrollReveal().reveal('.headline')
Todos los ajustes predeterminados y funciones de devolución de llamada.
ScrollReveal({
// 'bottom', 'left', 'top', 'right'
origin: 'bottom',
// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
distance: '0',
// Time in milliseconds.
duration: 600,
delay: 0,
interval: 0,
cleanup: false
// 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: 1,
// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.5, 0, 0, 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 desktop.
desktop: true,
// 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.0,
// 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) {}
}) API methods.
// Reverses the effects.
ScrollReveal().clean('.demo');
// Invokes all previous reveal() calls (with the appropriate arguments), to capture any new elements added to the DOM.
ScrollReveal().reveal('.demo', { //options });
// Destroys the instance.
ScrollReveal().destroy(); Registro de cambios
v4.0.5 (2018-11-27)
- Bugfixed
