<div data-scroll></div>
  <script src="./js-scroll-effect-module.js"></script>
  <script> new SCROLL_EFFECT_MODULE({ target: '[data-scroll]' }); </script>
      

  // with default css
  <link rel="stylesheet" href="./scroll-effect-module.css">
  <div data-scroll data-scroll-type="fadein"></div>
  <script src="./js-scroll-effect-module.js"></script>
  <script> new SCROLL_EFFECT_MODULE({ target: '[data-scroll]' }); </script>
      

  <script src="./js-scroll-effect-module.js"></script>
  <div data-scroll data-scroll-name="first"></div>
  <div data-scroll data-scroll-name="second"></div>
  <div data-scroll data-scroll-name="third"></div>

  <script>
  const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
    target         : '[data-scroll]',
    classNameInview: 'is-active',
    ratio          : 0.8,
    ratioReverse   : null,
    reverse        : true,
    autoStart      : true,
  });
  </script>
      

  <script src="./js-scroll-effect-module.js"></script>
  <div data-scroll data-scroll-name="first"></div>
  <div data-scroll data-scroll-name="second"></div>
  <div data-scroll data-scroll-name="third"></div>

  <script>
  const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
    target         : '[data-scroll]',
    ratio          : 0.8,
    reverse        : true,
    on: {
      Change: function(obj, index, name){
        console.log('Change', obj, index, name);
      },
      In: function(obj, index, name){
        console.log('In', obj, index, name);
      },
      Out: function(obj, index, name){
        console.log('Out', obj, index, name);
      },
      Scroll: function(top){
        console.log('Scroll', top);
      }
    }
  });
  </script>