● ScrollTrigger

https://github.com/terwanerik/ScrollTrigger
https://terwanerik.github.io/ScrollTrigger/

● 使い方

1. JavaScriptを読み込む

<script src="./ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger();
});
</script>

2. アニメーションさせたい要素に data-scroll をつける

<div>テスト</div>

　↓

<div data-scroll>テスト</div>

これだけで、準備完了です。

・要素が画面内に入ってないときは class="invisible"
・要素が画面内に入ったときは class="visible"

が自動的につけられます。 クラス名を変更したい時は次のようにオプションを変更します

3-A. オプションを変更する（ 個別に設定する場合 ）

<div data-scroll="toggle(after, before)">テスト</div>

とすると、要素が出現した時に「.after」クラスがつけられます。

・要素が画面内に入ってないときは class="before"
・要素が画面内に入ったときは class="after"

3-B. オプションを変更する（ まとめて設定する場合 ）

document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger({
    toggle: {
      visible: 'cls-animate',
      hidden : 'cls-before_animate'
    },
    offset: {
      x: 0,
      y: 100
    },
    addHeight: true,
    once: true
  }, document.body, window);
});

4. アニメーションcssクラスを探す

アニメーション用のcssクラスを探して気に入ったのをつけます