画面に入ったら要素をアニメーション（jquery.inview.js）

こんにちは。
emiです。

「アニメーション」と聞くと、いつも緊張していたのですが、
便利なプラグインを見かけたので、紹介します。

私が関わった案件で使用されていたjquery.inview.jsのまとめです。

やりたいこと
使用するプラグイン
使用方法（jquery.inview.js）
実現方法
参考サイト

やりたいこと

今回やりたいことは、
よくある要素が画面に入ったらフェードイン（下から画面内に現れるなど）です。

See the Pen jQuery.inview.js by emi (@emi-jp) on CodePen.

使用するプラグイン

今回使用するプラグインは、「jquery.inview.js」です。

Github↓

GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.

A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view. - protonet/jque...

上記プラグインを使用することで、

Event that is fired as soon as an element appears in the user’s viewport.

とあるように、ビューポート（画面内）に要素が入った時に、
jQueryを発火（動作する）させることができます。

この機能を使って、
画面に要素が入った時に、
その要素にアニメーション用のクラスを追加します。

使用方法（jquery.inview.js）

jquery.inview.jsを使用するためには、
下記2つの読み込みが必要になります。

①jQuery (1.8以上)

②jquery.inview.js

私が使用したCDN↓

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>　
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>

実現方法

下記をjsファイルに記載することでinview.jsが使用できます。

$('要素').on('inview', function() {
// 要素が画面内に入った時に実行する処理を記述
});

html内の要素（.box）が、画面に入った時、
その要素にクラス（fadeInRight）を追加します。

//.box要素が画面に入った時〜
$(".box").on("inview", function () {
  //その.boxにクラスfadeInRight追加
  $(this).addClass("fadeInRight");
});

元のCSS↓

.box{
  opacity:0;/*  見えない状態  */
  background-color:#ccc;
  width: 50%;
  padding: 2em;
}

▶︎opacity: 0;なので見えない状態です。

inview.jsが発火することで、追加されるCSS↓

.fadeInRight{
  transition: all 0.5s ease-in;
  transform: translateX(40px);/*  X軸へ40px動く  */
  opacity: 1;/*  見える状態  */
}

このCSSをいろいろ書き換えれば、

上下から現れたり、
グルグルまわしたり、

いろいろできます。

参考サイト

jquery.inviewのGithub↓

GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.

A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view. - protonet/jque...

実装の参考にさせてもらったサイト↓

inview.jsで画面スクロールで特定位置に入ったら要素をアニメーション表示させる方法 - STAND-4U

最近のWEBサイトでは「画面をスクロールしていくと要素が次々とアニメーション表示される」サイトが当たり前になってきています。今回は「jQuery.inview.js」と「cssアニメーション」をつかって、とても簡単にかつ、色々と応用が効く方...

以上です。