スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Pagetop

文字の中で背景画像が浮遊するアニメ。

使用サンプル：Text with Moving Backgrounds with jQuery

今回は分かりやすくするために、文字は太め、背景画像も色がたくさんあるものを使用しましたが、背景画像をシンプルなものにすると、文字が光っているように見せることも可能かな。
しかし、これはIE6非対応なので、まだ実用性は低いかも…。

JavaScript（function.js）
  1. $(function(){
  2. moveBgAround();
  3. });
  4.  
  5. function moveBgAround(){
  6. //x、y軸に0～400までの数値をランダムに振る
  7. var x = Math.floor(Math.random()*401);
  8. var y = Math.floor(Math.random()*401);
  9.  
  10. //背景をランダムに動かす時間（数値を下げると早く動く）
  11. var time = Math.floor(Math.random()*1001) + 2000;
  12.  
  13. //背景を動かす
  14. $('.scrollBg').animate({
  15. backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
  16. }, time, "swing", function(){
  17. moveBgAround();
  18. });
  19. }


CSS（style.css）
  1. .scrollBg {
  2. background-color: #FFF;
  3. background-image: url(***.jpg); /* 背景で動かす画像 */
  4. height: 300px;
  5. width: 600px;
  6. }


HTML
  1. <head>
  2. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
  4. <script type="text/javascript" src="js/function.js"></script>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9. <div class="scrollBg">
  10. <img src="overlay.png" alt="" /></div> <!-- 文字部分を透過したマスクとなるpng画像 -->
  11. </body>
スポンサーサイト
Pagetop
スライドショー（Nivo Slider）カスタマイズ#1 «  ホーム

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

Pagetop

コメントの投稿

非公開コメント

Pagetop
« スライドショー（Nivo Slider）カスタマイズ#1  ホーム
Pagetop
Profile

chiemi09

Author:chiemi09

JavaスクリプトもActionスクリプトも苦手なWebデザイナー。
せめてjQueryのカスタマイズができればと仕事の合間にお勉強中です。

Recent Entries
Archives
Theme
Search


RSS
Bookmarks
このブログをリンクに追加する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。