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@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.importSCROLL_EFFECT_MODULEfrom'js-scroll-effect-module';

Basic Use

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

Advanced Use

<scriptsrc="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@0.13.6/dist/js-scroll-effect-module.js"></script><divdata-scrolldata-scroll-name="name-1"></div><divdata-scrolldata-scroll-name="name-2"></div><script>constScrollEffectModule=newSCROLL_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, scrollupdateResizeAuto : 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