ブルーシュ

IT技術の勉強記録

ホーム > Tips > フロントエンド

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

, , ,

ウェブページをスクロールして、要素が画面内に入ったとき、ふわっと表示させるアニメーションです。これまで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)

JavaScriptとcssで要素をふわっと表示させるアニメーション #フロントエンド #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #JavaScript #軽量化 #intersectionobserver

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。