コピペで使えるパララックス(parallax)スクロール

実行サンプル

画面を上にスクロールし、エレメントが画面の下部20%範囲内に入ったら、エレメントを下から上にアニメーション移動して表示します。

1.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

2.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

3.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

4.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

5.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

6.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

7.下にスクロールしてください

ここに説明が入ります。
説明の2行目です。
説明の3行目です。

HTML,Javascriptソースコード

<script>
  var elms;
  window.addEventListener("DOMContentLoaded",function(){
    elms=document.getElementsByClassName("mamParallax");
    for(i=0;i<elms.length;i++){
      elms[i].style.opacity="0.0";
    }
    let css = document.createElement('style');
    document.head.appendChild(css);
    //translateY(20vh)指定はIEでanimation時は使えない為translateY(100px)とする
    let keyframe = '@keyframes mamParallax{'+
      '  0%{transform:translateY(100px);opacity:0.0;} '+
      '100%{transform:translateY(  0px);opacity:1.0;} '+
    '}';
    css.sheet.insertRule(keyframe,0);
  });
  window.addEventListener("load",function(){
    window.addEventListener("scroll",onScrollShow);
    onScrollShow();
  });
  function onScrollShow(){
    // スクロール位置を取得
    let scrollY = window.pageYOffset || document.documentElement.scrollTop;
    let windowH = window.innerHeight; // ウィンドウの高さ
    let threshHold=windowH*20/100;  //閾値(下から２０％入ったら）

    let elms=document.getElementsByClassName("mamParallax");
    for(i=0;i<elms.length;i++){
      let r=elms[i].getBoundingClientRect();
      if(r.top<( windowH-threshHold)){
        //一括指定だとIE11はanimation-durationが指定出来ない
        //elms[i].style.animation="mamParallax 1.0s linear 0s 1 normal both running";
        //個別指定だとIE11でも動く
        elms[i].style.animationName="mamParallax";
        elms[i].style.animationDuration="1.0s";
        elms[i].style.animationTimingFunction="ease-in-out";
        elms[i].style.animationDelay="0";
        elms[i].style.animationIterationCount="1";
        elms[i].style.animationDirection="normal";
        elms[i].style.animationFillMode="both";
        elms[i].style.animationPlayState="running";
      }
    }
  }
  //リロード(更新)時にwindowのスクロール位置を強制的に0,0にする
  window.addEventListener("beforeunload",function(){
    window.scrollTo(0, 0);
  });
</script>

<div class="mamParallax">
  <h3>1.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>2.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>3.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>4.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>5.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>6.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>
<div style="margin:50px;"></div>
<div class="mamParallax">
  <h3>7.下にスクロールしてください</h3>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
  <p>ここに説明が入ります。<br>説明の2行目です。<br>説明の3行目です。</p>
</div>