画像がふわっと出てくるやつをjQueryを使わずに実装する

ちょっとおしゃれなホームページによくある、画面をスクロールして画像が画面の表示領域に入るとふわっと浮き上がるように表示されるエフェクトあると思います。

ああいうやつを実装したい場合、いわゆる「Web制作」界隈では jQuery を使っているようです。

ですがもちろん今日び jQuery など死んでも使いたくありません。試してみたら素のHTML/CSS/JSでも簡単にそれっぽいものが実装できました。ふわっと出てくるやつは画像に限るわけでもありませんので、今回は適当なdivをふわっと出してみます。

まずは今回できたものを貼っておきます。

See the Pen Untitled by newnakashima (@newnakashima) on CodePen.

何をやっているかというと、特定のDOM要素が画面の表示領域に入っているかどうかの判定を scroll イベントで発火させて、ふわっと表示させるためのクラスを付与しています。

const pops = document.querySelectorAll('.pop')
pops.forEach(p => {
  const { top } = p.getBoundingClientRect()
  if (top < window.innerHeight) {
    p.classList.add('popped')
  } else {
    p.classList.remove('popped')
  }
})

top が window.innerHeight より小さいときというのは要素の上端が画面の中に入っているとき、ということを意味します。いきおいbottomの方は判定しなくて良いのか、とか考えてしまいそうですが、上にスクロールしたときにふわっと出すことはあまりないのでbottomでの判定は入れていません。

このコードでは一度アニメーションを表示して上にスクロールしてから再度下にスクロールして要素を表示させるとまたアニメーションします。それが煩わしい場合は p.classList.remove('popped') の行を消せばよいかと思います。

CSSのアニメーションはごく簡単で、小学生でも書けます。

.pop {
  height: 60px;
  align-items: center;
  background-color: yellow;
  opacity: 0;
}
.pop.popped {
  opacity: 1;
  animation: 2s pop;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

何をするにもすぐjQueryやら最終コミットが3年前の謎Reactライブラリを使おうとするプログラマーにはなりたくないものです。

Reactでこういうのをやりたいときはどーするんだ！という話はありますが、Reactらしい方法でアニメーションを使うのはちょっとだるいので、ただ見ばえのためにふわっとエフェクトを付けたいだけならCSSファイルにアニメーション用のクラスを定義しておいてuseEffectでJSの処理を実行する感じが良いのかなと思います。