SCROLL EFFECT MODULE

Feature

Add effect according to scroll.
By using pre-prepared CSS, it is surprisingly easy to add effects that match the scrolling.

Demo

• Document -> https://yama-dev.github.io/js-scroll-effect-module-docs/

Installation,Download

• npm -> https://www.npmjs.com/package/js-scroll-effect-module

• Standalone(CDN) -> https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/dist/js-scroll-effect-module.js

• Zip -> yama-dev/js-scroll-effect-module

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/examples/scroll-effect-module.css">
<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/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/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-active',

  ratio              : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
  reverse            : false, // スクロールを戻した時にクラスを削除するかどうか

  ratioReverse       : null, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定）

  firstDelay         : 100, // 初回動作までの遅延時間（ms）

  autoStart          : true, // 自動でスタートするかどうか
  autoStartType      : 'ready', // ready, load, scroll

  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

監視を開始

ex. ScrollEffectModule.Start();

Stop

監視を停止

ex. ScrollEffectModule.Stop();

Update

各要素の情報更新

ex. ScrollEffectModule.Update();

Dependencies

@yama-dev/js-dom

Licence

MIT

Author

yama-dev