以前、オシャレなヘッダ画像の演出ができるJazz up a Static Webpageでご紹介したJazz up a Static Webpageの使い方。
正式名称はどうなのかわかりません！実は！(笑)

そんなことはさておき、中身に入って行きましょう。

このスクリプトはｊQuery等の外部ライブラリは使わないです。
スクリプトの読み込みは本体のプログラムとプログラムを走らせる関数を書くだけ。

<script type="text/javascript" src="js/skrollr.js"></script>	
<script type="text/javascript">
skrollr.init({
	forceHeight: false
});
</script>

意外と簡単！

そして、HTMLこちら

<header class="band" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;">
	
<div class="container">
	
<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
						
<h1>Meaningless Pap</h1>
				
<a class="button" href="http://webdesign.tutsplus.com/author/ian-yates/">by Ian Yates</a>
			
</div><!--/ columns-->	
		
</div><!--/ container-->		
	
</header><!--/ band-->

このサンプルの構造上スクリプトが働く部分がヘッダになるので<header>で書いていますが、別にこの部分は<div>でも問題ないです。
そして、この<header>に書いてある物が重要なのです。
「data-0="background-position:0px 0px;"」が背景の基準点。
「data-500="background-position:0px -250px;">」がdata-500でbackground-position:0px -250px;にしますということ。

これと同じく、<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">の中でやっていることが以下。
「data-0="opacity: 1"」で透過の度合いを設定（これは1）
「" data-180="opacity: 0">」がdata-180でopacity: 0にしますということ。

この辺が扱えれば自由にあつかえると思います。
この場合背景が下がって、文字がフェードアウトしていきますけど、その逆で上がってきてフェードインしたり使い方しだいではいろんなところに仕掛けを作ることができそうです。

そして、CSS！
サンプルのCSSはやたらと色々書いていますが、肝心なのは以下。

header.band {
	background-image:url(../img/background.jpg);
	background-size:100%
}

ここで背景を指定して枠ぎりぎりに画像を拡大しているんです。
ここの背景がdata-500="background-position:0px -250px;">で動いているということです。

これでちょっと変わったヘッダの演出が自由自在にできるはず！
が、しかーし！予測はしていたけど、iPadやらスマホやらで見ると動きがカクカクする上にサイズが変化するので見栄えが非常に悪い！（まあ、サイズに関してはFuid Glid Layoutにすればなんとかなりそう）
この人たちには適用されないように工夫。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	 jQuery('div.band').css( 'background-position','0px 0');
	}else {
		skrollr.init({forceHeight: false});
}

これは何をやっているかというと、iPhone・iPad・iPod・Android端末だったらdiv.bandの背景位置を別途指定して、それ以外だったら（PCのみ）通常営業しますっということをやっています。
iPadでは検証済みですが、その他はわかりません！
まあ、この中の値をゴニョゴニョすればなんとかなると思います。
ちなみに、Androidのタブレットとスマホを見分けるには「mobile」と指定するとできるとな！
あっ！これはjQuery使ってやってるからこの技を使うならjQueryの読み込みを忘れずに！

« 前の記事