Bloosh Company

Development>フロントエンド

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

, , ,

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

下準備

まずは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 #intersectionobserver #JavaScript #軽量化

<<次の記事

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

前の記事>>

プラグインなしでWordPress個別記事にPHP・JS・cssスクリプトを埋め込む方法!

Tweets by blooshcompany