*

背景画像を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>

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

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


関連記事

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

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

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

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑