背景画像をアニメーション/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

背景画像jquery.backgroundPosition.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Starry Night by CSS-Tricks</title>
	
	<link rel="stylesheet" type="text/css" href="css/style.css" />
  
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
		
		  $('#midground').css({backgroundPosition: '0px 0px'});
		  $('#foreground').css({backgroundPosition: '0px 0px'});
		  $('#background').css({backgroundPosition: '0px 0px'});
		
			$('#midground').animate({
				backgroundPosition:"(-10000px -2000px)"
			}, 240000, 'linear');
			
			$('#foreground').animate({
				backgroundPosition:"(-10000px -2000px)"
			}, 120000, 'linear');
			
			$('#background').animate({
				backgroundPosition:"(-10000px -2000px)"
			}, 480000, 'linear');
			
		});
	</script>
	
</head>

<body>

    <div id="background"></div>
	<div id="midground"></div>
	<div id="foreground"></div>
	<div id="page-wrap">
	
		
		<h1>Background Animate</h1>
</div>		

</body>

</html>

	Auto-Moving Parallax Background

div等に指定した背景画像をアニメーションすることが出来るスクリプトです。
ただし位置を動かすだけで、フェードなどの効果は得られません。
フェードアニメーションを行いたい場合はカスタマイズが必要です。
jqueryを使用します。サンプルを確認できない場合は、こちらからご確認下さい、

セッティング

１．ダウンロード/セッティング

サイトへ行き、StarryNightMoving.zip ファイルをダウンロードします。
解凍したらcssフォルダとjsフォルダ、imagesフォルダをアップロード。
必要なら付属のpsdファイルやpng画像を編集して背景を調整します。（サンプルでは星の形を変えてみました）

２．<head>の設定

まずスクリプトを読み込ませます。

次に、背景アニメーションの設定を記述します。

３．HTMLのマークアップ

上記のように先に設定したID名を付加した要素を記述すればOKです。
ただし他のコンテンツは、これらの要素の上に重なるように表示しなければなりません。
なのでサンプルでは、 #page-wrap というIDの要素に position: relative; z-index: 300; を指定して背景よりも上に表示されるように設定されています。