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

テキストの背景画像を動かすJavaScriptです。
ネタ系ですかね・・・。
via:Text with Moving Backgrounds with jQuery - Gaya Design
テキストの背景を動かすJavaScript「Text with Moving Backgrounds with jQuery」サンプル

使用方法
まずテキスト部分を抜いた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「Text with Moving Backgrounds with jQuery」サンプル

sponsors

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

記事作成:
記事URL:

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