スポンサーサイト

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

スライドショー(Nivo Slider)カスタマイズ#1

使用サンプル:Nivo Slider

effectをデフォルトのrandomにしておくと、IE6で画像の切替が挙動不審。boxRainにしておくと、安定します…なんでだろ。ちなみにNivo SliderはIE6非対応らしいです…。
このスライドショーは画像からリンクをはることができるので、バナーの切替アニメとしても使えそうです。

JavaScript(function.js)
  1. $(window).load(function(){
  2. $('#slider').nivoSlider({
  3. //アニメーションの種類(random、fade、sliceUp、sliceUpDownなど)
  4. effect:'boxRain',
  5. //アニメーションのスピード
  6. animSpeed:500,
  7. //静止時間
  8. pauseTime:2000
  9. });
  10. });


CSS(style.css)


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.nivo.slider.pack.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="slider-wrapper theme-default">
  10. <div id="slider" class="nivoSlider">
  11. <a href="#" target="_self"><img src="001.jpg" width="600" height="300" alt="" /></a>
  12. <a href="#" target="_self"><img src="002.jpg" width="600" height="300" alt=""
      title="#htmlcaption" /></a>
  13. <a href="#" target="_self"><img src="003.jpg" width="600" height="300" alt="" /></a>
  14. <a href="#" target="_self"><img src="004.jpg" width="600" height="300" alt="" /></a>
  15. </div>
  16. <div id="htmlcaption" class="nivo-html-caption">htmlを入れることもできます</div>
  17. </div>
  18. </body>
スポンサーサイト

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

使用サンプル: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>
Profile

chiemi09

Author:chiemi09

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

Recent Entries
Archives
Theme
Search
RSS
Bookmarks
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。