以前『wow.jsの使い方』で同じような物をご紹介しましたが、実務でよく使うのは圧倒的に『inview.js』の方になります。
正確に言えばフェードインだけではなく、スクロールして表示領域に入ったらclassを付与して色んなイベントを発生させることが出来ます。
今回は画像とサンプルを使って『inview.js』の使い方を解説していきます。
今だけ！5大無料特典あり🎁
スクロールして表示領域に入ったらフェードイン出来る『inview.js』の使い方
『inview.js』の使い方は以下になります。
- 『inview.js』をダウンロードしてファイルを読み込む
- HTMLにclassを書く
- CSSでフェードイン前後のコードを書く
- jQueryで表示領域に入ったらclassを付与させる
それでは順番に見ていきますが、まずはjQueryを使用するのでjQuery本体を読み込みましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
-
【初心者向け】jQueryとは？CDNを使った本体の読み込み方についても分かりやすく解説
続きを見る
『inview.js』をダウンロード
まずは今回使用する『inview.js』を以下のGitHubページからダウンロードします。
inview.jsダウンロード
ダウンロードしたファイルを解凍したら『jquery.inview.min.js』を取り出します。
inview.jsファイル一覧
使うファイルはこれだけでOKです。
注意ポイント
そしてファイルを読み込むコードを書きます（HTMLと同じ階層にjsフォルダがあり、その中にjquery.inview.min.jsがある場合）
<script src="js/jquery.inview.min.js"></script>まずは下から上にフェードインさせたい場合を例に解説していきます。
HTMLにclassを書く
まずHTML側でフェードインさせたい要素に分かりやすいclass名を付けます。
今回は『js-fadeUp』とします。
<div class="container">
<div class="box js-fadeUp">
<img src="画像のパス" alt=""/>
</div>
<div class="box js-fadeUp">
<img src="画像のパス" alt=""/>
</div>
<div class="box js-fadeUp">
<img src="画像のパス" alt=""/>
</div>
</div>この『js-fadeUp』というclassが付いている要素が表示領域に入った時、jQueryでフェードイン用のclass名を付与します。
CSSでフェードイン前後のコードを書く
CSSはフェードイン前後のコードを書きます。
/* フェードイン(初期値) */
.js-fadeUp {
opacity: 0; /* 最初は非表示 */
transform: translateY(30px); /* 下に30pxの位置から */
transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
opacity: 1; /* 表示領域に入ったら表示 */
transform: translateY(0); /* 30px上に移動する */
transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}今回はフェードインさせる際、下から上に上がってくるようにしています。
左右に動かしたい場合は『translateY』を『translateX』にすればOKです。
『is-inview』というclass名はこの後のjQueryで付与します（このclass名は自由に決めてOK）
また表示領域に入ったと同時にフェードインが始まるとちょっと早いと思った場合は『transition-delay』で開始のタイミングを遅らせる事が出来ます。
jQueryで表示領域に入ったらclassを付与する
最後にjQueryです。
まずはコードを見てみましょう。
// スクロールして表示領域に入ったらclass付与
$(function () {
$(".js-fadeUp").on("inview", function () {
$(this).addClass("is-inview");
});
});これはこのような意味になります。
- 『js-fadeUp』というclassを持つ要素が表示領域に入ったら、
- その要素に対して『is-inview』というclass名を付与する
なので今回は『スクロールして表示領域に入ったらclassを付与する』という事をしているだけなので、フェードイン以外にも色々と応用が効きます。
例えばスクロールして表示領域に入ったらフォントの色を変えるという事も可能です。
スクロールしてフェードインとフォントの色を変えてみる
それでは最後に画像のフェードインとフォントの色が変わるサンプルを見てみましょう。
スクロールしていくと画像のフェードインが3種類（下から上、左から右、右から左）と、最後にフォントの色が変わりながら大きくなります（フォントはあまり使う機会はないと思いますが）
先ほどのコードに追記しているので、コードは以下のタブを切り替えてご覧ください。
See the Pen
inview.js by junpei (@junpei-sugiyama)
on CodePen.
これは実務でもかなり高確率で使うので、ぜひ覚えておきましょう。
以上になります。
-
Animate.cssをスクロールに応じてアニメーションできる『wow.js』の使い方【サンプルで解説】
続きを見る
-
【jQuery】スクロールして要素が画面内に入ったらフェードインさせる方法
続きを見る
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
