Web製作にjQueryが使われるようになって、すごく気になったエフェクトがありました。
それが「だんだんふわーっと表示させる」エフェクトです。
徐々に…ふわーっと…だんだん…色々な言葉で検索をしたのを覚えています。
結構簡単に実装できる「m5lazydisplay.js」の使い方をまとめてみました。
スポンサードリンク
m5lazydisplay.jsを設置する
jQueryの設置の仕方については以下の記事を参考にしてみてください。
【はじめてのjQuery】 jQueryとは？
とりあえず必要な部分だけ以下に記しておきますね。
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1"> <title>m5lazydisplay.jsデモ</title> <link href="common/css/import.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="common/js/m5lazydisplay.js"></script> <script> $(function(){ $("#test,img").m5LazyDisplay(); }); </script> </head> <body> <div id="wrap"> <p><img src="common/img/img_01.jpg"></p> <p><img src="common/img/img_02.jpg"></p> <p><img src="common/img/img_03.jpg"></p> <p><img src="common/img/img_04.jpg"></p> <p><img src="common/img/img_05.jpg"></p> <p><img src="common/img/img_06.jpg"></p> <p><img src="common/img/img_07.jpg"></p> </div> </body> </html> |
こんな感じで設置します。
デモも用意しました。
デモでは画像だけに直接適用させています。
たったこれだけで、実装できちゃうなんて簡単ですよね！
もちろんdiv要素にも適用できる
デモは画像だけにしてみたのですが、もちろんdivにも適用できます。
ヘッダー部分のhtml
|
1 2 3 4 5 |
<script> $(function(){ $("#hoge,img").m5LazyDisplay(); }); </script> |
body部分のhtml
|
1 |
<div id="hoge">divの部分もOKです</div |
こんな感じでdiv要素にも適用させれば、ブロックごとにふわーっとホームページを見せる事ができます。
はじめてこのエフェクトを見た時はとっても感動したのですが、こんなに簡単に実装できるとは思いませんでした…。
こんな記事もどうですか？
スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた
スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた
スポンサードリンク
カテゴリー：jQuery
