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

inview.js

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

inview.jsについて
- CDNでの読み込み
- ダウンロード
inview.jsの設定
サンプルデモ
まとめ

inview.jsについて

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

CDNでの読み込み

以下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>

inview.jsの設定

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

HTMLでクラス付与

スクロールアニメーションをつける要素にクラス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>

CSSアニメーション設定

.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%が基準値　*/
  }
}

JSの設定

スクロールした際、.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');

サンプルデモ

See the Pen inview Elementary by uhaha (@uhaha) on CodePen.

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が基準値　*/
  }
}

See the Pen inview Elementary2 by uhaha (@uhaha) on CodePen.