JavaScriptで、画像や要素が下からふわっと現れるアニメーションを実装する方法

今回は、下のデモのように下からふわっと画像や要素が現れるアニメーションを実装する方法を紹介します。

DEMO

とても頻繁に使われる表現で、ほとんどの人は目にしたことがあるでしょう。

jQueryなどでコードが紹介されることが多いですが、ここでは生のJavaScriptで書いていきます。

ふわっと現れるアニメーションの実装方法

それでは、HTML、CSS、JavaScriptのコードを説明していきます。

HTML

<div class="element js-animation"><img src="./img/1.jpg" alt="画像1"></div>
<div class="element js-animation"><img src="./img/2.jpg" alt="画像2"></div>
<div class="element js-animation"><img src="./img/3.jpg" alt="画像3"></div>

classに「js-animation」と記述した要素にはアニメーションが加わるようにします。

CSS

.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

js-animationのclassが付与された要素は、opacity:0;でいったん非表示にします。

js-animationにis-showが加われば、要素が下から現れるようにします。

JavaScript

/**
 * 到達したら要素を表示させる
 */
function showElementAnimation() {

  var element = document.getElementsByClassName('js-animation');
  if(!element) return; // 要素がなかったら処理をキャンセル
  
  var showTiming = window.innerHeight > 768 ? 200 : 40; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;

  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);

少し説明します。

window.innerHeight > 768 ? 200 : 40;

これは要素が200px（768px以下のウィンドウサイズでは40px）分過ぎたら表示させるために指定します。

これをしないと、要素が現れるタイミングが早すぎて分かりづらくなります。

// 上にスクロールして再度非表示にする場合はこちらを記述
element[i].classList.remove('is-show');

下にスクロールして要素が現れた後、再度上にスクロールした時、また要素を非表示にする場合はこのコードを記述します。

もし、一度現れた要素は表示させたままにする場合は、else if文ごと削除してください。

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

ブラウザの設定や閲覧環境によっては、JavaScriptが動かないことがあります。

そうすると、画像は消えたままになってしまいます。

それを防ぐために、以下のコードをどこかに記述しておくと安心です。

<noscript>
  <style>
  .js-animation {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }
  </style>
</noscript>

こうしておけば、JavaScriptが無効化されても大丈夫です。

もう一度デモを載せておきます。

DEMO

仕組みが分かれば簡単な処理なので、みなさんも挑戦してみて下さい。