Skip to content

yama-dev/js-scroll-effect-module

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


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