だいたいブログってのは記事を上から下に書いていくわけで、毎日書けばそりゃエントリが増えていきますし、どんどんページは縦長になりますよね。で、欲しい記事を探して縦長の下の方に向かってマウスをクリクリとまわすわけです。画像を使ったサイトなんかだと上から下まで画像がたくさんあったりします。で、マウスをクリクリして画面をスクロールする際に、新しく表示される画像(要はページの下の方にある画像)が何となくふわーんとフェードインするようなサイトに出くわしたことありませんかね。
あの「ふわーん」感が気になっちゃって気になっちゃって、どうしても真似したくなったので、導入してみましたというのが今回の記事です。
Google先生に聞いてみると、どうやらあのふわーんの正体は「Lazy Load」というPluginだそうで、先日導入したjQuery用のPluginも用意されているようです。あ、以前の自分の記事にリンクしてて、ラベルの階層化が放置されているのに気付きましたが気にしない。
Lazy Loadのサイトにお邪魔すると、どうも「最新のブラウザで思うように動いてくれない」らしいですが、まーちょっとやってみて動きゃいいやということで、入れてみます。
まず、Lazy LoadのDownloadから、Latestの"minified"バージョンをDownloadして来ます。これは".js"ファイルですから、Googleサイトに保存して、テンプレートから読みに行くように設定します。BloggerにはScript等を格納するスペースが準備されてませんから、外部サイトとしてGoogleサイトを使用しているわけですね。だんだん慣れてきました。
(私は"https://sites.google.com/site/[sitename]/home/js/jquery.lazyload.mini.js"に保存しました。)
次に、これは面白い(大したことない!?)のですが、画像をふわーんと表示させるに当たってダミーのような画像を用意します。ふわーん前に表示させておく画像、ということですね。適当な画像なら何でも良いのですが、目立たない方が良いと思います。よく皆さんやってらっしゃるのは1px x 1pxのちっさい画像を作成しておくようです。私も1px x 1pxの、透明な画像(grey.gif)を作成してGoogleサイトに保存しておきました。
(私は"https://sites.google.com/site/[sitename]/home/images/gray.gif"に保存しました。)
これで必要なファイルの準備は完了です。
格納したそれぞれのファイルを、ブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択し、<head></head>内に、以下の通り読み込ませる設定をしていきます。
<!--Lazy Load Plugin for jQuery用の記述-->
<script src='https://sites.google.com/site/[site name]/home/js/jquery.lazyload.mini.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$("img").lazyload({
placeholder:"https://sites.google.com/site/[site name]/home/images/gray.gif",
effect : "fadeIn"
});
});
</script>
<!--Lazy Load Plugin for jQuery用の記述-->
2行目と6行目に、先ほど保存したファイルへのパスを記述しています。
5行目と7行目で、ページ内の<img>タグに"fadeIn"の効果をつける、みたいな意味合いでしょうか。すいません細かいことは分かりません。
これで出来上がりです。
ページをスクロールしてみると、
ふわーん。
いやー楽しいですねー美しいですねー。
しかしここで不具合が。私のブログはGoogleのBloggerを使用してますが、サイドバーに「人気の投稿」欄など、画像を使用したガジェットが設置されています。この場合、何故かサイドバーに使用されている画像が表示されなくなってしまいます。具体的には、一旦ページの1番下までスクロールさせて、上に戻る際に初めてサイドバーの画像がふわーんと表示される、という不具合です。これじゃ何だか微妙ですので、Lazy LoadのfadeIn効果をサイドバーに適用しない、というかブログの記事内容(中央部分のみ)に適用するように変更したいと思います。
Lazy Loadは効果をclass単位(ページ内の部分単位)に設定出来るので、ブログの記事部分を指定します。Bloggerの場合、記事部分は".post-body"というclassで作成されているようなので、5行目を以下のように変更します。
(変更前) $("img").lazyload({
(変更後) $(".post-body img").lazyload({
これでサイドバー、というか".post-body"である記事部分以外にはふわーん効果はなくなりますが、ちゃんと表示されるようになります。ようやく真の出来上がり。
良かった良かった。
さて実際の効果は以下のようになります。どうぞー。
丁度良いネタがラーメンだったんで、、、
0 件のコメント:
コメントを投稿