Javascriptでパララックス(parallax)スクロール

Javascriptでパララックス(parallax)スクロール


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ソースコード


<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(200px);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;  //閾値(下から20%入ったら)

    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>




Mam's WebSite