10-07-13
背景画像をアニメーションさせる「Background-Position Animations」
demo
memo
作業内容
某サイトで見た、背景で画像が動き回っている透過ロゴに惹かれました。使っていたのはjQueryプラグインBackground-Position Animations。
まず、透過させたテキスト画像とその背景で動かせたい画像を用意。今回のサンプルの背景では下の画像が動いています。
--- head内にjQueryとjquery.backgroundPosition.jsを読み込む ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/100713/jquery.backgroundPosition.js"></script>
--- htmlサンプル ---
<p class="scrollBg">
<img src="img/100713/img_sample.png" width="680" height="100" alt="" />
</p>
--- cssサンプル ---
.scrollBg{
width:680px;
height:100px;
background-image:url(img/100713/ycam.jpg);
}
--- head内に動きの設定となるjavascriptを記述 ---
<script type="text/javascript">
$(document).ready(function() {
moveBgAround();
});
function moveBgAround() {
//X軸、Y軸にランダムの数値を振る
var x = Math.floor(Math.random()*681);
var y = Math.floor(Math.random()*401);
//ランダムの時間で背景画像を動かす（数値が低いほど早い）
var time = Math.floor(Math.random()*1001) + 3000;
//上記の設定でanimateさせる
$('.scrollBg').animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
moveBgAround();
});
}
</script>動きだす条件やどのように動かすかは細かく設定できそうです。