文字の中で背景画像が浮遊するアニメ。
使用サンプル:Text with Moving Backgrounds with jQuery
今回は分かりやすくするために、文字は太め、背景画像も色がたくさんあるものを使用しましたが、背景画像をシンプルなものにすると、文字が光っているように見せることも可能かな。
しかし、これはIE6非対応なので、まだ実用性は低いかも…。
今回は分かりやすくするために、文字は太め、背景画像も色がたくさんあるものを使用しましたが、背景画像をシンプルなものにすると、文字が光っているように見せることも可能かな。
しかし、これはIE6非対応なので、まだ実用性は低いかも…。
JavaScript(function.js)
- $(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();
- });
- }
CSS(style.css)
- .scrollBg {
- background-color: #FFF;
- background-image: url(***.jpg); /* 背景で動かす画像 */
- height: 300px;
- width: 600px;
- }
HTML
- <head>
- <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
- <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
- <script type="text/javascript" src="js/function.js"></script>
- <link href="css/style.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <div class="scrollBg">
- <img src="overlay.png" alt="" /></div> <!-- 文字部分を透過したマスクとなるpng画像 -->
- </body>
スポンサーサイト