*

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

公開日: : css3, html5, jquery, 未分類

今回は、背景画像をjqueryを使って、動かすという事をしてみました。

背景画像はアメニーションGIFを使えば、簡単にできますがそれでは、滑らかに動きません。

jqueryを使えば、滑らかに背景画像が動きます。

自分のホームページをおしゃれにしてみては、いかがですか?

まずは、デモを用意しましたので、見てください。
デモ01

これは、gif画像を使用しているわけではなく、png画像を3枚使用していて、そして、各画像のスピードを調整してできています。

以下にソースを記載します。

今回使用するスタイルシートは、
style.css
以上の1を使用します。

scriptは、
jquery.backgroundPosition.js
以上の1つです。

画像は、以下の3枚を使用しました。
background

foreground

midground

以下がindex.htmlのファイルです。
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<title>背景画像をjqueryを使用して、フルスクリーンで動かす方法。</title>
<meta charset="UTF-8" />

<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

</head>

<body>


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

	<h1>指定した3枚の背景画像が常に動きます。</h1>

	</div><!--/page-wrap-->



<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>
</body>

</html>

次に、スタイルシートです。
style.css

body{
	margin:0;
	padding:0;
	color:#FFFFFF;
}
h1{
	font-size:18px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#background {
	background: url(images/background.png) repeat 5% 5%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
}
#midground {
	background: url(images/midground.png) repeat 20% 20%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
}
#foreground {
	background: url(images/foreground.png) repeat 90% 110%;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 200;
}
#page-wrap {
	width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 300;
}

最後にjsファイルです。
jquery.backgroundPosition.js

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
            
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);

以上で完成です。
簡単で尚且つ滑らかに動くので、私としては、とてもおすすめです。

今回参考にした、サイトがありますので、こちらも参考にしてみてください。
jquery.backgroundPosition:複数の背景画像を常に動かせるJs

ソース元はここみたいです。
Starry Night by CSS-Tricks

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード

——————————————————————-
補足
今回は、画像3枚を動かしています。
各画像の動く時間や動きのアクションなどは、
以下の部分で設定ができます。
index.htmlファイル

<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>

以上の所で変更してください。

画像や、動きなどを変更すれば、だいぶ変わってくると思います。


関連記事

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑