Efectos de desplazamiento impresionantes en JavaScript-laxxx

Vista prévia

Descripción

laxxx es una biblioteca de JavaScript ligera vainilla que proporciona 20 + animaciones impresionantes para los elementos cuando se desplaza hacia abajo y hacia arriba.

¿Cómo funciona?

Enlace al archivo JavaScript principal.

<script src="/path/to/lax.min.js" >

Inicializa la librería y estamos listos para irnos.

window.onload = function() {


// init on window load

lax.setup()



// update every scroll

const updateLax = () => {


lax.update(window.scrollY)


window.requestAnimationFrame(updateLax)

}


window.requestAnimationFrame(updateLax)


}

Aplicar una o más animaciones a un elemento mediante el Data-LAX-PRESET atributo. Todas las animaciones posibles.

1. linger
2. lazy
3. eager
4. slalom
5. crazy
6. spin
7. spinRev
8. spinIn
9. spinOut
10. blurInOut
11. blurIn
12. blurOut
13. fadeInOut
14. fadeIn
15. fadeOut
16. driftLeft
17. driftRight
18. leftToRight
19. rightToLeft
20. zoomInOut
21. zoomIn
22. zoomOut
23. swing
24. speedy

<h1 class="lax" data-lax-preset="spin fadeInOut">


Laxxx Example
</h1>

Aplicar transformaciones adicionales al elemento en el desplazamiento.

1. data-lax-opacity
2. data-lax-translate
3. data-lax-translate-x
4. data-lax-translate-y
5. data-lax-scale
6. data-lax-scale-x
7. data-lax-scale-y
8. data-lax-skew
9. data-lax-skew-x
10. data-lax-skew-y
11. data-lax-rotate
12. data-lax-rotate-x
13. data-lax-rotate-y

<h1 class="lax" data-lax-opacity="200 1, 100 1, 0 0">


Laxxx Example
</h1>

Aplique filtros CSS al elemento utilizando los siguientes atributos.

1. data-lax-brightness
2. data-lax-contrast
3. data-lax-hue-rotate
4. data-lax-blur
5. data-lax-invert
6. data-lax-saturate
7. data-lax-grayscale

Checkout el README para más detalles.

Registro de cambios

v1.2.3 (04/05/2019)

• Se ha añadido rotateX y rotateY transforma

v1.2.2 (04/04/2019)

• Se ha corregido un problema con LAX. addElement

v1.2.1 (04/03/2019)

• Solucionado el problema al cambiar el tamaño de ventana

v1.2.0 (03/26/2019)

• Añadida funcionalidad para animaciones adaptables
• Añadida funcionalidad para las animaciones de hojas de Sprite
• Cambio de interrupción: ahora debe agregar la clase LAX a cualquier elemento que desee animar.
• Ahora el estilo en línea se combinará en animación
• Se ha cambiado la estructura sugerida para usar Window. requestAnimationFrame en lugar de enlazarse con el evento scroll de ventana
• Ahora puede agregar opciones de Loop, offset y Speed en animaciones personalizadas
• Mejoras de rendimiento y ajustes de código

v1.1.0 (03/19/2019)

• datos modificados-LAX-Optimize a Data-LAX-use-GPU
• ahora usa Data-LAX-Optimize para optimizar elementos fuera de la pantalla
• tecla de posición de fondo añadida
• añadido swing y presets rápidos

v1.0.5 (03/19/2019)

• Soporte mejorado para reaccionar, Vue. js y manipulación DOM

v1.0.4 (03/17/2019)

• Se agregó LAX. populateElements () para su uso en actualizaciones DOM, cambio de tamaño de la ventana, etc