Install¶

Installation¶

npm

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

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

CDN

<script src="https://yama-dev.github.io/js-scroll-effect-module/dist/js-scroll-effect-module.js"></script>

Download

以下よりファイルをダウンロードして配置します。

Download

Basic Sample¶

スクロールで表示状態を監視したい要素に、任意の属性を追加します。この例では data-scroll を対象にしています。

<link rel="stylesheet" href="https://yama-dev.github.io/js-scroll-effect-module/examples/scroll-effect-module.css">
<script src="https://yama-dev.github.io/js-scroll-effect-module/dist/js-scroll-effect-module.js"></script>

<div data-scroll>
  item 1
</div>

<div data-scroll>
  item 2
</div>

<div data-scroll>
  item 3
</div>

<script>
new SCROLL_EFFECT_MODULE({
  target : '[data-scroll]',
  ratio  : 0.8,
});
</script>

対象要素が判定位置に入ると、デフォルトでは is-scroll-active クラスが付与されます。

Custom Class¶

付与するクラス名は classNameInview で変更できます。

new SCROLL_EFFECT_MODULE({
  target          : '[data-scroll-effect]',
  classNameInview : 'is-active',
});

[data-scroll-effect] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

[data-scroll-effect].is-active {
  opacity: 1;
  transform: translateY(0);
}

Reverse Animation¶

reverse を true にすると、要素が判定位置の外に戻った時にクラスを削除します。

new SCROLL_EFFECT_MODULE({
  target  : '[data-scroll]',
  ratio   : 0.8,
  reverse : true,
});

戻り時だけ判定位置を変えたい場合は ratioReverse を指定します。

new SCROLL_EFFECT_MODULE({
  target       : '[data-scroll]',
  ratio        : 0.8,
  ratioReverse : 1,
  reverse      : true,
});

Named Elements¶

targetDataName で指定したdata属性は、コールバックの第3引数として取得できます。

<div data-scroll data-scroll-name="section-1"></div>
<div data-scroll data-scroll-name="section-2"></div>

new SCROLL_EFFECT_MODULE({
  target         : '[data-scroll]',
  targetDataName : '[data-scroll-name]',
  on: {
    In: function(item, index, name){
      console.log(name);
    },
  },
});

Methods¶

インスタンスを変数に保持すると、任意のタイミングで更新や停止ができます。

const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
  target: '[data-scroll]',
});

ScrollEffectModule.Update();
ScrollEffectModule.Start();
ScrollEffectModule.Stop();

詳しい設定値とメソッドは API を参照してください。