jQueryで要素が画面に表示された時にアニメーションを動かす
ホームページでイベントを設定した時、ファーストビューでその要素が表示されていない場合、スクロールした時点でアニメーションが終わってしまっているということが発生してしまいます。
そこで、アニメーションを設定した要素が【画面内に入った時】をトリガーにして、アニメーションをスタートさせたいと思います。
jQueryで【要素が画面内に入った時】をトリガーにするにはinView.jsを使うのが楽！
javascriptのライブラリ『inView.js』を使用すると、イベント”inview”が使えるようになります。
この”inview”をトリガーにして、動作を設定すると良いです。
inView.jsのダウンロードと読み込み
inView.jsは以下のURLからダウンロードしてください。
https://github.com/protonet/jquery.inview
Github使っていない人はCodeをクリックしてください。
Download ZIPをクリックして、リポジトリをZIP形式でダウンロードしてください。
inView.jsをダウンロードしたら、解凍してください。
実際に使うのは『jquery.inview.min.js』もしくは『jquery.inview.js』だけです。
<!-- jQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<!-- inView -->
<script src="./js/jquery.inview.min.js"></script>HTMLでjQueryと一緒に読み込んでください。
inView.jsの使い方
inView.jsを読み込んだら、HTMLとCSS、jQueryの設定をしていきます。
【HTML】
<body>
<div class="hoge"></div>
</body>【CSS】
.hoge {
margin: 1000px auto;
width: 500px;
height: 500px;
background: #bcf;
}
.hoge.show {
background: #fcc;
}hogeクラスにshowクラスが付くと、背景色が変わる。ただそれだけです。
【javascript】
$(".hoge").on("inview", function(event, isInView) {
$(this).toggleClass("show");
});inviewイベントが発生したら、hogeクラスの付いた要素にshowクラスを付けたり外したりするだけのサンプルです。
実際に動くサンプルを作りました。
See the Pen inviewのテスト by Uilou (@uilou754) on CodePen.
何度かスクロールしていただくとわかると思いますが、要素の端っこが画面内に現れた時点でアニメーションが開始されます。
inview.jsは【要素が完全に画面内に入ってから】ではなく、【要素の一部でも表示エリア内に映った時点】でトリガーが発生します。
上記サンプルではtoggleClassで切り替えましたが、表示状態によって処理を変えたい場合（表示状態をif文で処理したい場合）は引数のisInViewを利用して以下のようにします。
$(".hoge").on("inview", function(event, isInView) {
if (isInView) {
// 今.hogeが画面内に入ったよー
$(this).addClass("show");
} else {
// 今.hogeが画面から出たよー
$(this).removeClass("show");
}
});結果は一緒ですが、こちらは現在の要素の表示状態を見て、その後の処理を切り替えています。
jQueryで【要素が画面内に入った時】のトリガーを自作する場合
このinviewイベントですが、こういうイベントを自分で作ることもできます。
オリジナルイベントの作り方については、以下の記事で説明しています。
この方法を使って、指定要素が画面内に現れた時に【inview】、画面外に出た時に【outview】をトリガーするプログラムを作ってみました。
See the Pen 疑似inview.jsを自作 by Uilou (@uilou754) on CodePen.
しかし、このプログラムはスクロールするたびに画面逸脱の判定がループ処理で実行されるため、重たい処理になりますし、スクロールするたびにinviewかoutviewイベントを吐き続けるため、切り替わった時だけイベントを発行するような処理も加える必要があります。
そう考えると、こういうinView.jsのような便利なライブラリを作ってくれるなら、自前で作るよりもこの恩恵に預かった方が良いですよね。
巨人の肩に乗るという表現がありますが、便利な物があるなら、ぜひ使わせてもらいましょう！
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
