js-scroll-effect-module

Add effect at scroll.

Usage no npm install needed!

<script type="module">
  import jsScrollEffectModule from 'https://cdn.skypack.dev/js-scroll-effect-module';
</script>

README

SCROLL EFFECT MODULE

GitHub


Feature

Add effect according to scroll.


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="./scroll-effect-module.css">
<script src="./js-scroll-effect-module.js"></script>

<div class="js-scroll js-scroll__fadein-basic"></div>

<script> new SCROLL_EFFECT_MODULE({ elem : '.js-scroll' }); </script>

Advanced Use

<link rel="stylesheet" href="./scroll-effect-module.css">
<script src="./js-scroll-effect-module.js"></script>

<div class="js-scroll"></div>

<script>
  var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
    elem               : '.js-scroll',
    firstElem          : '.js-scroll--first',

    displayRatio       : 0.8, // 判定する比率を指定(ウィンドウ高さを1として指定)
    displayReverse     : true, // スクロールを戻した時にクラスを削除するかどうか

    firstDelay         : 0, // 初回動作までの遅延時間(ms)
    firstDelaySteps    : 100,  // 初回出現要素を指定した場合のステップ遅延時間(ms)

    addClassNameActive : 'is-active', // null を設定するとクラスが付与されなくなる。

    on: {
      Scroll: function(top){
        console.log('Scroll', top);
      },
      Change: function(item, pos){
        console.log('Change', item, pos);
      },
      In: function(item, pos){
        console.log('In', item, pos);
      },
      Out: function(item, pos){
        console.log('Out', item, pos);
      }
    }
  });
</script>

Advanced Use (Acceleration)

<script src="./js-scroll-effect-module.js"></script>
<script>
  var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
    acceleration       : true,
    on: {
      Acceleration: function(num){
        console.log('Acceleration', num);
      }
    }
  });
</script>

API


Browser support

Browser OS、version
Internet Explorer 11+
Chrome 最新
Firefox 最新
Safari 最新
Android 4.4+ Chrome
iOS 8.0+ safari

Dependencies

@yama-dev/js-dom





For Developer

Contribution

  1. Fork it ( https://github.com/yama-dev/js-scroll-effect-module/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Licence

MIT


Author

yama-dev