サイトを見ているときに画像や要素がふわっと出てくると、なんとなくウキウキしてしまうのは私だけでしょうか? そんなウキウキ感を演出してくれるアニメーションの実装方法をめも。Pure JavaScriptでの実装になります。 まずはどんな動きをするのか、このサイトのトップページにも使っているのでそちらをご覧ください。

HTML

<div class="element js-fadein"></div>
<div class="element js-fadein"></div>
<div class="element js-fadein"></div>
ふわっとさせたい要素のクラスに今回はjs-fadeinを付与

CSS

.js-fadein {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.js-fadeinが付与された要素は非表示にしておきます。
visibility: visible;
transform: translateY(0px);
これらを指定することで.js-fadein.is-showが加わった際に要素がふわっと表示されます。 ふわっと感を変えたい場合はtransform: translateY(40px);transition: all 1s;の数値を調節しましょう。

JavaScript

/* 到達したら要素を表示させる */
function showElementAnimation() {
                    
  var element = document.getElementsByClassName('js-fadein');
  if(!element) return; // 要素がなかったら処理をキャンセル
                      
  var showTiming = window.innerHeight > 768 ? 200 : 80; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset; //スクロール量を取得
  var windowH = window.innerHeight; //ブラウザウィンドウのビューポート(viewport)の高さを取得
                    
  for(var i=0;i<element.length;i++) { 
    var elemClientRect = element[i].getBoundingClientRect(); 
    var elemY = scrollY + elemClientRect.top; 
    if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
    // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);
なるほど〜
var showTiming = window.innerHeight > 768 ? 500 : 400;
要素が出てくるタイミングはここで調節します。 ここでは要素が200px過ぎたら表示されるようになっています。ウィンドウサイズが768px以下の場合は80px過ぎたら表示されます。

JavaScriptが無効化された場合の対策

これは結構大切なのかなと。 ブラウザの設定などでJavaScriptが動かないと「js-fadein」を付与した要素は消えたままになってしまいます。 なんだこのサイトってなってしまうので、以下のコードを記述しておくことをオススメします。
<noscript>
  <style>
    .js-fadein {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
    }
  </style>
</noscript>

さいごに

JSのコードも難しそうに見えますが一つひとつ紐解いていくとしっかり理解できます。 このアニメーションを加えるだけで高級感のあるサイトになりますね。そして、注目させたい箇所に使うことでユーザーの目を引くことができるので効果的です。

参考ページ

https://tech-dig.jp/js-fuwatto-animation/