Efectos de desplazamiento impresionantes en JavaScript-laxxx

Tiempo de ejecución: 30 minutos. Empezar

Autor: alexfoxy
Views Total: 236
Sitio oficial: Ir a la web
Actualizado: April 5, 2019
Licencia: MIT

Vista prévia

Efectos de desplazamiento impresionantes en JavaScript-laxxx

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

Te puede interesar: