PixelDesign Workshop Rotating Header Image

トップのタイトルイメージを入れ替えました

2010年8月6日 11:02 PM

見た目はあんまり変わらないのですが・・・

自分のサイトがiPadでちゃんと見えないというのはあんまり気持ちのいいことではないのでヘッダのタイトルムービーをFlashからHTML+jQuery+CSSに変更しました。
これでPCとおなじくiPadでもタイトルイメージを見ることができるようになりました。多分に自己満足なのですが、それにしてもキモチイイ。

HTML5とかCSS3ではないのがちょっと残念なのですが、そのへんは今後の課題ということにしてあります。
最初、いっそのこと全部動画にしてHTML5の video でやろうかと思ったのですが、残念ながらiPadのSafariが完全に対応していなくて断念しました。


画像を動かしているのはもちろん一からスクリプトを作ったわけではなく、jQueryのプラグイン、ImageFadingSlider （こちらを参考にさせていただいた）を使わせていただいています。
使い方的には簡単なのですが、画像の縦横比をキープするのが難しそうなので、簡単にまとめておいてみます。

仕込み自体は簡単、まず以下の３個のjsファイルを自分のサイトのjs用のフォルダに入れておきます。

  • jquery-1.3.2.js
  • metadata.js
  • ImageFadingSlider 1.0.js
このサイトの場合だったら、使用中のテーマフォルダ内のheader.phpをカスタマイズ、以下のコードを付け加えます。

まず<head></head>の中にスクリプト関係を記述

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.imagefadingslider.js"></script>

<script type="text/javascript">
	$(function(){
		$("#move_pict").imageFadingSlider({
			item_width:920,  //実際に表示される幅
			item_height:150, //実際に表示される高さ
			easing:"2", //動き（1、2、random）1は横移動、2は縦、あとはランダム
			total_time:8000, //合計時間
			dist:463, //動きの量（ピクセル）
			fading_time:3000 //フェード時間
		});
	});
</script>
ピクセルの縦横比を保ったまま表示させるには使用する画像の大きさは
幅＝実際に表示される幅+動きの量
高さ＝実際に表示される高さ+動きの量
が必要です。
動き2を指定して、縦移動のみにしていても幅には余分に移動量に指定したピクセル数分大きくしておく必要があります。

<body></body>の中に以下を記述します

<div id="id名">
	<img src="画像パス1">
	<img src="画像パス2">
	<img src="画像パス3">
</div>

さらにCSSに以下の要素を加えます。

#id名 {
	overflow: hidden;
	position: relative;
}

このタイトルムービーの場合はプラグイン自体をカスタマイズささせてもらって
  • 枠線をなしに
  • 縦移動だけなので画像の横追加を無しに
  • 透過ping画像で文字をのせているのでイメージの表示順IDを一個づつ下げる
などとしました。

今後としては、ひとつおきに移動方向を下から上、そしてその逆と変化させたいと思っています。出来るかなぁ？

コメントをどうぞ