jquery.backgroundPosition.jsを使って指定の複数背景画像を常に動か(アニメーション)し続けてみます。
Contents
動かし続ける背景画像のCSSの記述
※動かし続ける背景画像を3パターン(#background、#midground、#foreground)用意しました。必要に応じて変更して下さい。
<style type="text/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; } --> </style>
jquery.backgroundPosition.jsを使って指定の複数背景画像を常に動かし続けるJavaScriptの記述
※jquery-1.3.2.min.jsとjquery.backgroundPosition.jsファイルを読み込みます。(jqueryのバージョンが高いと動かなくなるかもです)PNG画像をレイヤー的に指定して、背景画像の位置を移動させてます。
<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>
複数背景画像を常に動かし続けるHTMLの記述
※3パターンの背景画像を用意しました。
<div id="background"></div> <div id="midground"></div> <div id="foreground"></div> <div id="page-wrap"> <h1>指定した3枚の背景画像が常に動きます。</h1> </div><!--/page-wrap-->
jquery.backgroundPosition:背景画像を常に動かすデモページ
jquery.backgroundPosition:背景画像を常に動かすデモページ
ソース元:Starry Night by CSS-Tricks
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告