JavaScriptとcssで要素をふわっと表示させるアニメーション : Intersection Observer

ウェブページをスクロールして、要素が画面内に入ったとき、ふわっと表示させるアニメーションを作る方法を紹介します。これまでonscrollイベントを使っていましたが、スクロールのたびにイベントが発生して動作が重くなる原因になっていました。なのでJavaScriptのIntersection Observer APIを使います。

参考になりそうなTIPS

Intersection Observerで、少しスクロールしたら現れるヤツ

下準備

まずはHTML側の準備。ふわっとさせたい要素にfadeクラスを付けます。

<div class="fade">
	<p>ふわっとさせたいのだ</p>
</div>

<div class="fade">
	<p>ふわっとさせたいでござる</p>
</div>

cssの設定

.fade {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}

fadeクラスのものはopacity(透過率)が0なので見えません。また、元の位置より30px下にずれています。activeクラスがつくと元の位置に表示されて見えるようになるってことです。transformでふわ～んと動作します。数字はお好みで変更してください。

JavaScriptのソースコード

下記コピペしてください。

<script type="text/javascript">
const targets = document.getElementsByClassName('fade');
for(let i = targets.length; i--;){
 let observer = new IntersectionObserver((entries, observer) => {
  for(let j = entries.length; j--;){
   if (entries[j].isIntersecting) {
    entries[j].target.classList.add('active');
   } else{
    entries[j].target.classList.remove('active');
   }
  }
 });
 observer.observe(targets[i]);
}
</script>

※一度だけ動作させたい場合

スクロールして画面に現れるたびにではなく、一度だけ動作させたい場合は下記のとおり。

<script type="text/javascript">
const targets = document.getElementsByClassName('fade');
for(let i = targets.length; i--;){
 let observer = new IntersectionObserver((entries, observer) => {
  for(let j = entries.length; j--;){
   if (entries[j].isIntersecting) {
    entries[j].target.classList.add('active');
    observer.unobserve(entries[j].target);
   }
  }
 });
 observer.observe(targets[i]);
}
</script>

unobserve()して切断しています。

下記、動作サンプル

　
　
参考サイト：
Intersection Observer API (MDN WEB DOCS)