jQuery/Vanilla Javascript

【inview.js】スクロールしたらふわっと表示されるCSSアニメーションにfilterをプラスして演出みよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
inviewjs

今回はスクロール表示の際にイベントを発生させるプラグイン「inview.js」と画像フィルターCSS(filter)を使用してスクロールしたときのアニメーションを作成していきます。

inview.jsは古参jQueryプラグインです。
1.0.0verだと機能しない可能性があるので注意が必要です。
jqueryバージョン3に対してinview.jsは以下のバージョンを使用することをお勧めします。

以下CDNのURLになります。
protonet-jquery.inviewのCDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>

以下GitHubページのCodeボタンのDownloadZipよりダウンロードしjquery.inview.jsもしくは jquery.inview.min.jsを読み込みます。
GitHub-protonet / jquery.inview

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.inview.min.js"></script>

スクロールするとふわっとフェードインする演出にプラスして今回は同時にCSSで明度でも演出するアニメーションを作成します。

スクロールアニメーションをつける要素にクラスvisibleを付与しておきます。

<section class="img01 visible">
<h1 class="tit_top">inview.js + CSS3</h1>
</section>
<section class="img02 visible">
<h1 class="tit_top">SECTION02</h1>
</section>
<section class="img03 visible">
<h1 class="tit_top">SECTION03</h1>
</section>

.visibleでアニメーション前の初期設定( 透明度0など )をします。
.effectで透明度0、明度300%から透明度1、明度100%に戻すアニメーションCSSを作成します。

.visible {
  opacity: 0;
  transition: transform 0.5s linear;
  animation-duration: 2.5s;
  animation-fill-mode: both;
}
/* brightness */
.effect {
  animation-name: imgbrightness;
  opacity: 1;
  transition: .8s;
}
@keyframes imgbrightness {
  0% {
    opacity: 0;
    filter: brightness(300%);
	/* 明度300% */
  }
  100% {
    opacity: 1;
    filter: brightness(100%);
	/* 100%が基準値 */
  }
}

スクロールした際 、.visibleがビューポートに入った場合上記で設定したCSSアニメーション(.effect)を付加し、ビューポートから抜けた場合は上記のCSSアニメーション (.effect)を削除します。

<script>
$(function() {
  $('.visible').on('inview', function(event, isInView) {
  //一度のみのinviewの際は .oneにする
    if (isInView) {
		// .visibleがビューポートに入った場合
    	$(this).addClass('effect');
    } else {
		// .visibleがビューポートにから抜けた場合
    	$(this).removeClass('effect');
    }
	//$('#footer').off('inview');
  });
});
</script>

一度のみのスクロールイベント発生にしたい場合は以下の様に.onを.oneに変更します。

$(function() {
  $('.visible').one('inview', function(event, isInView) {
  //一度のみのinviewの際は .oneにする
  });
});

inviewイベントを発生させたくない要素には以下の様に指定します。

$('#footer').off('inview');

サンプル

CSSフィルターを以下の様に色相の調整に変更するとまた違ったエフェクトがかかります。

.effect_hue-rotate {
  animation-name: imghue-rotate;
  opacity: 1;
  transition: .8s;
}
@keyframes imghue-rotate {
  0% {
    opacity: 0;
    filter: hue-rotate(90deg)
	/* ここで調整 */
  }
  50% {
    opacity: 0.5;
    filter: hue-rotate(180deg)
  }
  100% {
    opacity: 1;
    filter: hue-rotate(0deg)
	/* 0degが基準値 */
  }
}

サンプル

inview.jsは手軽に簡単なアニメーションを付加するのに最適です。
animate.cssのCSSも簡単に使用できるしスクロールアニメーションにそこまでこだわった動きを必要としない場合はinview.jsで十分演出できると思いました。

uhaha

これCSSアニメーション頑張ればもっとかっこよくできるかも。。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

コメントを残す

*