jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても広がります。慣れてしまえば簡単なので是非取り入れてみてください。
ふわーっと
そうですそうです、ふわーっと、ですー
【サンプル】フェードイン（ふわっと）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 | .fadeIn { opacity: 0; transition: 2s;}.fadeIn.is-show { opacity: 1;} |
jQuery
1 2 3 4 5 6 7 | $(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } });}); |
【サンプル】下からフェードイン（ふわっと）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview fadeIn_up"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_up"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_up"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 | .fadeIn_up { opacity: 0; transform: translate(0, 50%); transition: 2s;}.fadeIn_up.is-show { transform: translate(0, 0); opacity: 1;} |
jQuery
1 2 3 4 5 6 7 | $(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } });}); |
【サンプル】左からフェードイン（ふわっと）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview fadeIn_left"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_left"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_left"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 | .fadeIn_left { opacity: 0; transform: translate(-50%, 0); transition: 2s;}.fadeIn_left.is-show { transform: translate(0, 0); opacity: 1;} |
jQuery
1 2 3 4 5 6 7 | $(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } });}); |
【サンプル】右からフェードイン（ふわっと）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview fadeIn_right"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview fadeIn_right"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview fadeIn_right"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 | .fadeIn_right { opacity: 0; transform: translate(50%, 0); transition: 2s;}.fadeIn_right.is-show { transform: translate(0, 0); opacity: 1;} |
jQuery
1 2 3 4 5 6 7 | $(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } });}); |
【サンプル】フェードイン（ふわっと、繰り返す）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview_re fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 | .fadeIn { opacity: 0; transition: 2s;}.fadeIn.is-show { opacity: 1;} |
jQuery
1 2 3 4 5 6 7 8 9 | $(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } });}); |
【サンプル】下からフェードイン（ふわっと、繰り返す）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview_re fadeIn_up"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_up"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_up"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 | .fadeIn { opacity: 0; transition: 2s;}.fadeIn.is-show { opacity: 1;} |
jQuery
1 2 3 4 5 6 7 8 9 | $(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } });}); |
【サンプル】左からフェードイン（ふわっと、繰り返す）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview_re fadeIn_left"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_left"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_left"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 | .fadeIn_left { opacity: 0; transform: translate(-50%, 0); transition: 2s;}.fadeIn_left.is-show { transform: translate(0, 0); opacity: 1;} |
jQuery
1 2 3 4 5 6 7 8 9 | $(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } });}); |
【サンプル】右からフェードイン（ふわっと、繰り返す）
スクロールすると、ふわーっと。
動き（アニメーション）がわかりやすいようにスタイル（CSS）を付けています。
HTMLとCSSとjQueryはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="section"> <div class="imgBox inview_re fadeIn_right"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""> </div> <div class="imgBox inview_re fadeIn_right"> <img src="https://125naroom.com/demo/img/simple02.jpg" alt=""> </div> <div class="txtBox inview_re fadeIn_right"> <p>ふわっと</p> </div></div> |
CSS
1 2 3 4 5 6 7 8 9 | .fadeIn_right { opacity: 0; transform: translate(50%, 0); transition: 2s;}.fadeIn_right.is-show { transform: translate(0, 0); opacity: 1;} |
jQuery
1 2 3 4 5 6 7 8 9 | $(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } });}); |
『inview.js』のダウンロード
まずは『inview.js』に必要なファイルを下記サイトからダウンロードします。
『inview.js』の使い方
ダウンロードファイルの中で必要なファイルは以下の1点です。
- jquery.inview.min.js
※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。
HTML
1 2 | <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.inview.min.js"></script> |
CDNを使う場合は、
1 2 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> |
1回だけの場合（参考）
『.inview』要素が表示されると、『.is-show』が追加（addClass）される。
1 2 3 4 5 6 7 | $(function(){ $(".inview").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } });}); |
繰り返す場合（参考）
『.inview_re』要素が表示されると、『.is-show』が追加（addClass）される。
『.inview_re』要素が見えなくなると、『.is-show』が削除（removeClass）される。
1 2 3 4 5 6 7 8 9 | $(function(){ $(".inview_re").on("inview", function (event, isInView) { if (isInView) { $(this).stop().addClass("is-show"); } else { $(this).stop().removeClass("is-show"); } });}); |
HTML（参考）
1 2 3 | <div class="imgBox inview fadeIn"> <img src="https://125naroom.com/demo/img/simple01.jpg" alt=""></div> |
CSS（参考）
1 2 3 4 5 6 7 | .fadeIn { opacity: 0; transition: 2s;}.fadeIn.is-show { opacity: 1;} |
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
ふわーっとしたパンが食べたいですねー
いいですねー、買いに行きましょうー
