SCROLL EFFECT MODULE

Feature

Demo

Installation,Download

Using

NPM Usage

# install npm.
npm install --save-dev js-scroll-effect-module

// import.
import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';

Basic Use

<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>

Advanced Use

<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>

Methods

Start

Stop

Update

Dependencies

Licence

Author