指定した範囲の背景を動かしちゃうj-query『backgroundPosition』を導入してみた。

2011年6月 9日 (木) カテゴリ：お役立ち情報 【ツール・WEB】

WordCamp Fukuoka 2011　さんのヘッダーに表示されているバックグラウンドの画像が動いちゃうやつがカッコイイんで、導入してみたいなーと思っていたら『backgroundPosition』というj-queryがあったので早速使ってみました。(‘A’)

導入はすごい簡単なので、すぐに使えるよ。

というわけで、そんな素晴らしいj-query『backgroundPosition』を提供しているCSS-TRICKさんのデモサイトはこちら。

Starry Night by CSS-Tricks

うんうん、星がきれいに動いておりますな。('A')

公式サイトではサンプルが入ったファイル一式がダウンロードできます。

http://css-tricks.com/examples/StarryNightMoving.zip

一応保管用（自己責任でどうそ）
http://www.susi-paku.com/StarryNightMoving.zip

解凍した中身はこんな感じ。

ここのindex.htmlを改造しても利用できるし、中のソースをコピーしても利用できるので安心だね。

さっそくサイトにbackgroundPositionを導入してみます。

というわけで、先ほど解凍したサンプルファイルをもとに必要なJS部分をコピーします。これね。

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<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>

あとは、この部分に使われている

      $('#midground').css({backgroundPosition: '0px 0px'});
      $('#foreground').css({backgroundPosition: '0px 0px'});
      $('#background').css({backgroundPosition: '0px 0px'});

部分を指定してあげれば、その範囲の背景を動かすことができるわけです。

    <div id="background"></div>
    <div id="midground"></div>
    <div id="foreground"></div>

サンプルで入っている div　はこれで、一番下の星をベースに透過PNGがそれぞれ動いている感じです。

例えば body　の背景を動かしたい場合は、

<script type="text/javascript">
    $(function(){
$('body').css({backgroundPosition: '0px 0px'});

        $('body').animate({
            backgroundPosition:"(-10000px -2000px)"
        }, 240000, 'linear');

    });
</script>

これでOK出来上がり。('A')　自分の好きな範囲を指定すれば導入できるから簡単だね。

あとは、背景の流れていく方向と速度（経過時間）を指定します。

 

縦方向の数値を0pxにすれば　横方向のみの移動となり、逆に横方向の数値をゼロにすれば縦方向のみになります。

次に流れていく速度の設定はここの数値を大きくしてあげればOK

240000, 'linear'　→　580000, 'linear'

これで、通常の移動速度よりも倍遅くなります。（原理としてはゼロ点に向かって移動するタイムらしいのでいつか止まります）
なので、サンプルに入っているやつは星の移動速度を調整して立体感を出している訳だね。よくできているよね。('A')

というわけでサイトのアクセントとして導入しててみはいかがでしょうか('A')おしまい

前後の記事

• << 前の記事
  5万以下で買える一眼レフX50とプロも愛用するEOS7Dを動画と写真で比較してみたレビュー
• 次の記事 >>
  直感的に操作ができる手書き風のフレームワーク作成ソフトiPlotzが便利

関連した記事

• WEBサイトを丸ごとキャプチャできる無料ソフト PHARAMACY 他、便利なものをいくつか紹介
• GoogleMAPに代わるらしい、オープンソースの地図サービスOpenStreetMapを使ってみました。
• CSS3で作るボタンやバナーの決定版！グラデーションやストライプ、アイコンなどの自動生成可能なGrad3が秀逸すぎる
• 30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい！導入方法など
• 【導入メモ】Grow！ボタンを指定したURLや同一ページに設置する方法やコンテンツの編集など
• 良い記事やサイトへamazonポイントと交換可能なチップが贈れるGrow!ボタンを導入！各種設定や退会方法も
• ブログリニューアル！MTにjQuery mobile導入、文字の可読性など使い勝手重視に作りました