テキストの背景を動かすJavaScript「Text with Moving Backgrounds with jQuery」

テキストの背景画像を動かすJavaScriptです。
ネタ系ですかね・・・。
via：Text with Moving Backgrounds with jQuery - Gaya Design

使用方法

まずテキスト部分を抜いたPNG画像を作成します。
▼こんなんです。

次にこの画像をdivでくくってやります。


<div class="scrollBg">
 <img src="pngまでにパス" />
</div>

で、背景で動かしたい画像を作ります。

そして、背景にCSSで設定します。


<style>
.scrollBg {
	background-image: url(背景画像パス);
	background-color: #000000;
	width: 487px;
	height: 83px;
}

.scrollBg img {
	display: block;
}
</style>

これを動かすためJavaScriptを駆使します。
まずjQueryからjquery.jsをダウンロード。
次に背景画像を動かすjQueryプラグインBackground-Position Animationsをゲットしたら後は書くだけ。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	moveBgAround();
});

function moveBgAround() {
	//x,y軸に0-400までのランダム数値を振っていきます
	var x = Math.floor(Math.random()*401);
	var y = Math.floor(Math.random()*401);

	//ランダムの時間で動かします
	var time = Math.floor(Math.random()*1001) + 2000;

	//ほれ背景動け！
	$('.scrollBg').animate({
		backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
	}, time, "swing", function() {
		moveBgAround();
	});
}
</script>

応用すると面白いのできそうですね。

サンプル

Javascriptサンプルページ一覧

skuare.net