てんぽ: サイドバー読み込みの進行割合に応じて画像を変化させる

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

サイドバー読み込みの進行割合に応じて画像を変化させる

2009年08月17日(月)

CSSのみでプログレスバーを再現したものにはアニメーションGIFを用いた例が知られているが、 実際に何かの進捗状況を反映してバーの進行度を変化させている例はほとんどない。 今回は、ブログでよくある2カラムレイアウトにおいて「サイドバー」の読み込み状況を反映して進行するプログレスバーの実装方法を提案する。

<div class="sidebar">

  <div class="blog-parts">
  (各種ブログパーツ)
  </div>

  <div class="blog-parts">
  (各種ブログパーツ)
  </div>
  (以下省略)

</div>

<div class="sidebar"></div>がサイドバーであり、その内容として複数の「ブログパーツ」(<div class="blog-parts">)が並んでいるとする。

WebブラウザはHTMLファイルを読み込んだとき、ソース文書の記述順に逐次内容をレンダリングしていく。 このとき、途中に読み込みに時間のかかるブログパーツが存在する場合、それ以降のレンダリングがストップするために、 サイドバーの内容のそれぞれが表示されるまでに時間差が生じる。

このレンダリングの遅延を利用してプログレスバーの進行を表現する。 具体的には、各種ブログパーツの後にそれぞれプログレスバーのパーツを記述し、 CSSのposition: absoluteで任意の場所に表示させる。 仮にプログレスバーの表示場所をサイドバーの最上部とするなら、サンプルコードは以下のようになる。

<div class="sidebar">

  <div class="progress-bar" id="box"></div>

  <div class="blog-parts">
  (各種ブログパーツ)
  </div>

  <div class="progress-bar" id="bar1"></div>

  <div class="blog-parts">
  (各種ブログパーツ)
  </div>

  <div class="progress-bar" id="bar2"></div>
  (以下省略)
</div>
.sidebar {
 position:relative; /* プログレスバーの位置の基準 */
}

.progress-bar {
 position: absolute; /* プログレスバーのパーツを同じ位置に置く */
 top:0;
 left:0;
 height: 20px;
 background: red;/* プログレスバーの背景色 */
}

#box {
 width: 100px; /* 進行度100%のときの幅 */
 background: white; /* 進行度0%のときの背景色 */
}

#bar1 {
 width: 10px;
}

#bar2 {
 width: 20px;
}

以下省略

サンプルコードは方法を説明するためだけのものであり簡略化しているが、 この手法を応用すれば、プログレスバーだけでなく、たとえば 女の子が少しずつ着衣していく(『リリカルなのは』の変身シーンのような)アニメーションも可能である。

言うまでも無く、この方法をそのまま用いると、見た目のためだけに多くの空divが必要になるので、あまりお勧めできない。 実際にやるなら、ネタとして割り切るか、ある程度の工夫が必要である。

ちなみにサンプルページでは、プログレスバーの進行をわかりやすく(=サイドバーの読み込み速度を遅く)するため、 アフィリエイト広告やバナーを多めに貼っておいた。

#182
カテゴリ:HTML・CSS
タグ[ CSS ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/182-3c0f7b53

<<共有テンプレート[bbs]更新 | 2009年9月の雑記>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。