Awesome Scroll Effects In JavaScript – laxxx

Category: Animation , Javascript , Recommended | March 20, 2019
Author: alexfoxy
Views Total: 102
Official Page: Go to website
Last Update: March 20, 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
  document.addEventListener('scroll', function(e) {
    lax.update(window.scrollY) 
  }, false)

  // set initial positions
  lax.update(window.scrollY) 
  
}

Apply one or more animation to an element using the 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 laxxx-preset="spin fadeInOut">
    Laxxx Example
</h1>

Apply additional transforms to the element on scroll.

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

Apply CSS filters to the element using the following attributes.

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

Changelog:

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