<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/examples/scroll-effect-module.css"> <script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js"></script> <div data-scroll></div> <div data-scroll></div> <script> new SCROLL_EFFECT_MODULE({ target: '[data-scroll]', ratio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定） reverse: true, // スクロールを戻した時にクラスを削除するかどうか }); </script>

<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.5/dist/js-scroll-effect-module.js"></script> <div data-scroll data-scroll-name="name-1"></div> <div data-scroll data-scroll-name="name-2"></div> <script> const ScrollEffectModule = new SCROLL_EFFECT_MODULE({ target : '[data-scroll]', classNameInview : 'is-scroll-active', ratio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定） reverse : false, // スクロールを戻した時にクラスを削除するかどうか ratioReverse : null, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定） firstDelay : 100, // 初回動作までの遅延時間（ms） autoStart : true, // 自動でスタートするかどうか autoStartType : 'ready', // ready, load, scroll updateResizeAuto : true, throttleInterval : 5, 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(_y){ console.log('Scroll', _y); }, } }); </script>