Awesome Scroll Effects In JavaScript – laxxx

Category: Animation , Javascript , Recommended | October 16, 2019
Author: alexfoxy
Views Total: 840
Official Page: Go to website
Last Update: October 16, 2019
License: MIT

Preview:

Awesome Scroll Effects In JavaScript – laxxx

Description:

laxxx is a lightweight vanilla JavaScript library that provides 20+ awesome animations for elements when scrolling down and up.

Basic usage:

Link to the main JavaScript file.

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

Initialize the library and we’re ready to go.

window.onload = function() {

  // init on window load
  lax.setup()
  
  // update every scroll
  const updateLax = () => {
    lax.update(window.scrollY)
    window.requestAnimationFrame(updateLax)
  }

  window.requestAnimationFrame(updateLax)
  
}

Apply one or more animation to an element using the data-lax-preset attribute. All possible animations.

  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>

Apply additional transforms to the element on scroll.

  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>

Apply CSS filters to the element using the following attributes.

  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 the Readme for more details.

Changelog:

v1.2.5 (10/16/2019)

  • Bugfixed

v1.2.3 (04/05/2019)

  • Added rotateX and rotateY transforms

v1.2.2 (04/04/2019)

  • Fixed a problem with lax.addElement

v1.2.1 (04/03/2019)

  • Fixed issue when resizing window

v1.2.0 (03/26/2019)

  • Added functionality for responsive animations
  • Added functionality for sprite sheet animations
  • Breaking change: You must now add the lax class to any element you want to animate.
  • Now inline style will be merged into animation
  • Changed suggested set up to use window.requestAnimationFrame instead of binding to window scroll event
  • Can now add loop, offset and speed options into custom animations
  • Performance improvements and code tweaks

v1.1.0 (03/19/2019)

  • changed data-lax-optimize to data-lax-use-gpu
  • now use data-lax-optimize for optimising elements off screen
  • added background position key
  • added swing and speedy presets

v1.0.5 (03/19/2019)

  • Improved support for react, vue.js and DOM manipulation

v1.0.4 (03/17/2019)

  • Added lax.populateElements() for use on DOM updates, window size change etc

You Might Be Interested In:


Leave a Reply