一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法

一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法

一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法

一定量スクロールすると表示されるページトップボタンをjQueryなしで実装したいなと思って調べていたら、ドンピシャな記事がありました。

[JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページトップへスムーススクロールで戻るボタンを作る | memocarilog

こちらの記事を参考に、一定量スクロールした時に要素の表示・非表示を切り替える処理だけを実装したので、その内容を備忘録として残しておきたいと思います。

一定量スクロールすると要素をふんわり表示させる処理をjQueryなしで実装する方法

内部リンクのスムーススクロールについては別途実装済みの環境でしたので、スクロールでページトップボタンを表示させる処理のみを実装しました。

ページトップへ戻る時のスムーススクロールも併せて実装する場合は、上記memocarilogさんの記事を見ていただくか、こちらの記事をご参照ください。

書くまでもないかもですが、一応HTMLは以下のような感じです。

<div class="pagetop">
  <a href="#page">ページトップへ</a>
</div>

追加したJavaScriptは以下の通りです。これで、ページトップから300px以上スクロールされると.pagetopが出現し、300px未満では非表示になります。

<script>
//基本設定
let options = {
  pageTopBtn : '.pagetop', //ページトップボタンのクラス名(IDでも可)
  showScroll : 300, //ボタンを出現させるスクロール位置
  fadeSpeed : 10 //早い 5〜30 ゆっくり
};

window.addEventListener('load', function() {
  let btn = document.querySelector(options.pageTopBtn);

  //フェイドインアニメーション設定
  let fadeIn_timer;
  function fadeInTimer(opaValue) {
    if (opaValue < 1) {
      opaValue = opaValue + 0.05;
      btn.style.filter = 'alpha(opacity:"+(opaValue*100)+")';
      btn.style.opacity = opaValue;
      //opaValueが1になるまで透明度を0.05ずつ足して行く
      //fadeSpeedに設定された時間毎に繰り返す
      fadeIn_timer = setTimeout(function(){fadeInTimer(opaValue);}, options.fadeSpeed);
    } else {
      //opaValueが1になったら繰り返し処理を停止
      clearTimeout(fadeIn_timer);
      btn.style.filter = 'alpha(opacity:100)';
      btn.style.opacity = 1;
    }
  }

  //フェイドアウトアニメーション設定
  let fadeOut_timer;
  function fadeOutTimer(opaValue) {
    if ( opaValue >= 0.05) {
      opaValue = opaValue - 0.05;
      btn.style.filter = 'alpha(opacity:"+(opaValue*100)+")';
      btn.style.opacity = opaValue; 
      //opaValueが1になるまで透明度を0.05ずつ引いて行く
      //fadeSpeedに設定された時間毎に繰り返す
      fadeOut_timer = setTimeout(function(){ fadeOutTimer(opaValue); }, options.fadeSpeed);
    } else {
      //opaValueが0.05以下になったら繰り返し処理を停止
      clearTimeout(fadeIn_timer);
      btn.style.filter = 'alpha(opacity:0)';
      btn.style.opacity = 0;
    }
  }

  //スクロールイベント
  btn.style.opacity = 0;
  btn.style.filter = 'alpha(opacity:0)';
  window.onscroll = function() {
    var winSc = document.body.scrollTop || document.documentElement.scrollTop;
    if(winSc >= options.showScroll){
      clearTimeout(fadeOut_timer);
      var opaValue = parseFloat(btn.style.opacity);
      fadeInTimer(opaValue);
    } else {
      clearTimeout(fadeIn_timer);
      var opaValue = parseFloat(btn.style.opacity);
      fadeOutTimer(opaValue);
    }
  }

});
</script>

基本設定で表示させたい要素のクラス名(もしくはID名)や表示するタイミングなどを環境に合わせて指定します。あとはそのままで大丈夫です。

memocarilogさんの記事では「window.onload = function()」が使われていますが、他と重複してしまって動かなかったので「window.addEventListener(‘load’, function()」に変えています。

あと、getElementByIdをquerySelectorに変えて、クラスとIDの両方に対応できるようにしました。

あとがき

フェードインとフェードアウトは、不透明度を少しずつ変化させて実現するんですね~。勉強になりました!

ちなみに、jQueryを使った方法については、「クリックするとスルスルッと上昇する「ページトップへ」ボタンを設置する方法」という投稿で紹介しています。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です