Efecto de desplazamiento de rendimiento dinámico Parallax en Vanilla JS-Rallax. js
| Autor: | ChrisCavs |
|---|---|
| Views Total: | 399 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 18, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Rallax. js es un nuevo plugin de paralaje de JavaScript de vainilla que aplica un efecto de desplazamiento de paralaje dinámico y de alto rendimiento a los elementos dentro del documento.
Depende del requestanimationframe API para proporcionar la animación de eficaz.
See also:
Funcionamiento
Instale el Rallax. js con NPM.
# NPM $ npm install rallax.js --save
Importe el componente rallax.
import rallax from 'rallax.js'
Aplique el efecto de desplazamiento de paralaje a los elementos que especifique.
const myParallax = rallax('.element') Personaliza la velocidad de la animación.
const myParallax = rallax('.element',{
speed: 0.3
}) Auto deshabilita el efecto de desplazamiento de paralaje cuando el tamaño de la pantalla es pequeño que un valor especificado, por ejemplo, dispositivo móvil.
const myParallax = rallax('.element',{
speed: 0.3,
mobilePx: false
}) Iniciar/detener el efecto de desplazamiento de paralaje manualmente.
myParallax.start(); myParallax.stop();
Cambiar/obtener la velocidad de la animación.
myParallax.changeSpeed(.8); myParallax.getSpeed();
Event handlers.
parallax.when( () => window.scrollY > 400, () => parallax.changeSpeed(1) )
