Search

jQuery pluginフェード効果

  1. CrossSlide〔クロスフェード効果付のスライドショー〕
  2. Image Cross Fade Transition〔マウスオーバーでクロスフェード〕
  3. InnerFade with Jquery〔クロスフェード効果付きで画像切り替え〕
  4. whenLoaded 〔読込んだ画像を順番にフェードイン表示〕

CrossSlide
クロスフェード効果付のスライドショー

unknown

CrossSlide

GPL
jquery.js v1.2.6、jquery.cross-slide.js

複数の画像にいろいろなクロスフェード効果を付けてスライド表示することができるライブラリ。 普通にクロスフェードするだけではなく、画像のどこからどこまでスクロールしながらクロスフェードするか、上下どちら方向にスクロールしながらクロスフェードするかなど、インパクトのあるスライドショーを作ることができます。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.cross-slide.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
  $('#gallery').crossSlide(
    { 
      speed: 45, /* スピード（単位：ピンクセル or 秒） */
      fade: 1    /* フェード（単位：秒） */
    },
   	/* 画像ごとに上下どちらにクロスフェードするか指定 */
    [
      { src: '画像URL', dir: 'up'   },
      { src: '画像URL', dir: 'down' },
      { src: '画像URL', dir: 'up'   },
      { src: '画像URL', dir: 'down' }
    ]
  );
});
</script>
<!-- CSS -->
<style type="text/css">
  #gallery { margin:1em auto; border:2px solid #555; width:450px; height:180px; }
</style>
HTML 
/* Slide + cross-fade */
<div id='gallery'>Loading…</div>
CrossSlideの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>CrossSlide | 設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.cross-slide.js"></script>
        <script type="text/javascript">
        $(function() {
            $('#gallery1').crossSlide(
                {
                    speed: 45, //in px/sec
                    fade: 1    //in sec
                },
                [
                  { src: '/content/lib/galleryimages/christmas-party-1.jpg', dir: 'up'   },
                  { src: '/content/lib/galleryimages/christmas-party-2.jpg', dir: 'down' },
                  { src: '/content/lib/galleryimages/christmas-party-4.jpg', dir: 'up'   },
                  { src: '/content/lib/galleryimages/christmas-party-5.jpg', dir: 'down' }
                ]
            );
        });
        $(function() {
            $('#gallery2').crossSlide({
                sleep: 2, //in sec
                fade: 1   //in sec
            },
            [
                { src: '/content/lib/galleryimages/flickr/cake1.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2314028177/' },
                { src: '/content/lib/galleryimages/flickr/cake2.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2314027955/' },
                { src: '/content/lib/galleryimages/flickr/gyubei.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2232217285/' },
                { src: '/content/lib/galleryimages/flickr/hiraku1.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2852943318/' },
                { src: '/content/lib/galleryimages/flickr/hiraku2.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2852109217/' },
                { src: '/content/lib/galleryimages/flickr/krispykremedoughnuts.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2170286465/' },
                { src: '/content/lib/galleryimages/flickr/magicspice.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2232217029/' },
                { src: '/content/lib/galleryimages/flickr/silverg.jpg', href: 'http://www.flickr.com/photos/22559849@N06/2232234261/' }
            ]);
        });
        $(function() {
            $('#gallery3').crossSlide({
                    fade: 1
                },
                [
                    {
                        src:  '/content/lib/galleryimages/christmas-party-1.jpg',
                        from: '100% 80% 1x',
                        to:   '100% 0% 1.7x',
                        time: 3
                    },
                    {
                        src:  '/content/lib/galleryimages/christmas-party-2.jpg',
                        from: 'top left',
                        to:   'bottom right 1.5x',
                        time: 2
                    },
                    {
                        src:  '/content/lib/galleryimages/christmas-party-4.jpg',
                        from: '100% 80% 1.5x',
                        to:   '80% 0% 1.1x',
                        time: 2
                    },
                    {
                        src:  '/content/lib/galleryimages/christmas-party-5.jpg',
                        from: '100% 50%',
                        to:   '30% 50% 1.5x',
                        time: 2
                    }
                ]
            );
        });
        </script>
        <style type="text/css">
        #gallery1 { margin:1em auto; border:2px solid #555; width:450px; height:180px; }
        #gallery2 { margin:1em auto; border:2px solid #555; width:240px; height:180px; }
        #gallery3 { margin:1em auto; border:2px solid #555; width:450px; height:180px; }
        </style>
    </head>
    <body>
        <h1><a href='http://www.gruppo4.com/~tobia/cross-slide.shtml'>CrossSlide</a> | 設置サンプル</h1>
        <h2>Slide + cross-fade</h2>
        <p>画像ごとに上下どちらにクロスフェードするか指定可能です。</p>
        <div id='gallery1'>Loading…</div>

           <h2>Static cross-fade</h2>
           <p>通常のクロスフェード。画像にリンクを指定可能です。</p>
        <div id='gallery2'>Loading…</div>

        <h3>Ken Burns effect</h2>
        <p>画像のどのいちからどの位置までクロスフェードするか指定可能です。</p>
        <div id='gallery3'>Loading…</div>

       </body>
</html>

Image Cross Fade Transition
マウスオーバーでクロスフェード

unknown

Image Cross Fade Transition

jquery.js v1.2.6

jQueryを使用して画像にフェード効果を付け、画像にマウスオーバーするともう一枚の画像がフェードインしながら表示され、またフェードアウトしていく3つのテクニックが紹介されています。

▼画像にマウスオーバーすると隠しておいたもう1枚の画像が表示され、元画像と交じり合いながら消えていき、元の画像に戻る例。

設置イメージ設置イメージ
Image Cross Fade Transitionの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>CSS Tooltips - loadaverageZero | 設置サンプル</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            // when the DOM is ready:
            $(document).ready(function () {
              // find the div.fade elements and hook the hover event
              $('div.fade').hover(function() {
                // on hovering over, find the element we want to fade *up*
                var fade = $('> div', this);
                
                // if the element is currently being animated (to a fadeOut)...
                if (fade.is(':animated')) {
                  // ...take it's current opacity back up to 1
                  fade.stop().fadeTo(250, 1);
                } else {
                  // fade in quickly
                  fade.fadeIn(250);
                }
              }, function () {
                // on hovering out, fade the element out
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                  fade.stop().fadeTo(3000, 0);
                } else {
                  // fade away slowly
                  fade.fadeOut(3000);
                }
              });
            });
        </script>
        <style type="text/css">
            body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
            h1 { font-size:150%; }
            img { border:0; }
            /* fade */
            .fade { position:relative; top:0; left:0; width:120px; height:160px; display:block; }
            .fade div { position:absolute; top:0; left:0; display:none; }
        </style>
    </head>
    <body>
        <h1><a href='http://jqueryfordesigners.com/image-cross-fade-transition/'>Image Cross Fade Transition</a> | 設置サンプル</h1>
        <p>▼画像にマウスオーバーすると隠しておいたもう1枚の画像が表示され、元画像と交じり合いながら消えていき、元の画像に戻ります。</p>
        <div class="fade">
            <a href="#"><img src="/content/img/ajax/start.png" /></a>
            <div>
                <a href="#"><img src="/content/img/ajax/end.png" /></a>
            </div>
        </div>
    </body>
</html>

▼画像にマウスオーバーするとCSSで背景にしていたもう一枚の画像が表示され、元画像と交じり合いながら消えて息、元の画像に戻る例。

設置イメージ設置イメージ
Image Cross Fade Transitionの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>CSS Tooltips - loadaverageZero | 設置サンプル</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            // when the DOM is ready:
            $(document).ready(function () {
              // find the div.fade elements and hook the hover event
              $('div.fade').hover(function() {
                // on hovering over, find the element we want to fade *up*
                var fade = $('> div', this);
                
                // if the element is currently being animated (to a fadeOut)...
                if (fade.is(':animated')) {
                  // ...take it's current opacity back up to 1
                  fade.stop().fadeTo(250, 1);
                } else {
                  // fade in quickly
                  fade.fadeIn(250);
                }
              }, function () {
                // on hovering out, fade the element out
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                  fade.stop().fadeTo(3000, 0);
                } else {
                  // fade away slowly
                  fade.fadeOut(3000);
                }
              });
            });
        </script>
        <style type="text/css">
            body{ margin:20px; padding:0; font:12px/1.5 verdana,sans-seif; }
            h1 { font-size:150%; }
            img { border:0; }
            /* fade */
            .fade { position:relative; top:0; left:0; width:120px; height:160px; display:block; }
            .fade div { position:absolute; top:0; left:0; display:none; }
        </style>
    </head>
    <body>
        <h1><a href='http://jqueryfordesigners.com/image-cross-fade-transition/'>Image Cross Fade Transition</a> | 設置サンプル</h1>
        <p>▼画像にマウスオーバーすると隠しておいたもう1枚の画像が表示され、元画像と交じり合いながら消えていき、元の画像に戻ります。</p>
        <div class="fade">
            <a href="#"><img src="/content/img/ajax/start.png" /></a>
            <div>
                <a href="#"><img src="/content/img/ajax/end.png" /></a>
            </div>
        </div>
    </body>
</html>

InnerFade with Jquery
クロスフェード効果付きで画像切り替え

unknown

InnerFade with Jquery

jquery.js v1.2.3、jquery.innerfade.js

要素をクロスフェード効果付きで切替表示するjQueryプラグイン。 ニュースティッカーや画像のスライドショーに最適！ クラス名を指定するだけで簡単に組み込めます。 切替速度の指定も可能です。

設置イメージ設置イメージ
HEAD 
<!-- JS -->
<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.innerfade.js" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(
    function(){
      $('ul#portfolio').innerfade({ speed:1000, timeout:2000, type:'sequence', containerheight:'220px' });
      $('.fade').innerfade({ speed:1000, timeout:6000, type:'random_start', containerheight:'1.5em' });
      $('.adi').innerfade({ speed:'slow', timeout:5000, type:'random', containerheight:'150px' });
    }
  );
</script>
<!-- CSS -->
<style type="text/css">
  li { list-style:none; margin:0; padding:0; }
  li a { text-decoration:none; }
  ul#portfolio li img{ border:1px solid #ccc; padding:4px; }
</style>
HTML 
<ul id="portfolio">
  <li><img src="画像URL" width="240" height="180" alt="" /></li>
  <li><img src="画像URL" width="240" height="180" alt="" /></li>
  ・・・
</ul>
<br style="float:none;clear:both;" />
InnerFade with Jqueryの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>InnerFade with Jquery | 設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css"  type="text/css" media="all" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.innerfade.js"></script>
        <script type="text/javascript">
            $(document).ready(
                function(){
                    /* ニュースティッカー */
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });
                    /* 画像スライドショー */
                    $('ul#portfolio').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
                    
                    $('.fade').innerfade({
                        speed: 1000,
                        timeout: 6000,
                        type: 'random_start',
                        containerheight: '1.5em'
                    });
                    
                    $('.adi').innerfade({
                        speed: 'slow',
                        timeout: 5000,
                        type: 'random',
                        containerheight: '150px'
                    });
                }
            );
        </script>
        <style type="text/css">
            li { list-style:none; margin:0; padding:0; }
            li a { text-decoration:none; }
            /* Listen */
            ul#news { border:1px solid #ccc; padding:2em; background: #fffeb8; }
            ul#portfolio li img{ border:1px solid #ccc; padding:4px; }
        </style>
    </head>
    <body>
        <h1><a href='http://medienfreunde.com/lab/innerfade/'>InnerFade with Jquery</a> | 設置サンプル</h1>
        <h2>ニュースティッカー</h2>
        <ul id="news">
            <li><a href="#n1">ニュース1</a></li>
            <li><a href="#n2">ニュース2</a></li>
            <li><a href="#n3">ニュース3</a></li>
            <li><a href="#n4">ニュース4</a></li>
            <li><a href="#n5">ニュース5</a></li>
            <li><a href="#n6">ニュース6</a></li>
            <li><a href="#n7">ニュース7</a></li>
            <li><a href="#n8">ニュース8</a></li>
            <li><a href="#n9">ニュース9</a></li>
        </ul>
        <br style="float:none;clear:both;" />
        <h2>画像スライドショー</h2>
        <ul id="portfolio">
            <li><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" /></a></li>
            <li><a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ" /></a></li>
            <li><a href="http://www.flickr.com/photos/22559849@N06/3053382326/" title="バースデーケーキ@銀座GINTO by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3247/3053382326_d457fa52ee_m.jpg" width="240" height="180" alt="バースデーケーキ@銀座GINTO" /></a></li>
            <li><a href="http://www.flickr.com/photos/22559849@N06/3055162547/" title="ダークチェリーモカ@STARBUCKS by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" width="240" height="180" alt="ダークチェリーモカ@STARBUCKS" /></a></li>
            <li><a href="http://www.flickr.com/photos/22559849@N06/2973352946/" title="メロンソーダとカフェオレ@CAFE EAT代官山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" width="240" height="180" alt="メロンソーダとカフェオレ@CAFE EAT代官山" /></a></li>
            <li><a href="http://www.flickr.com/photos/22559849@N06/2971768652/" title="Giotto@3 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda_m.jpg" width="240" height="180" alt="Giotto@3" /></a></li>
        </ul>
        <br style="float:none;clear:both;" />
    </body>
</html>

whenLoaded
読込んだ画像を順番にフェードイン表示

2009/3/8

The magic of 'onload', revealed!

jquery.js、jquery.whenloaded.js

読込んだ画像を隠しておき、すべての画像が読込まれたら順番にフェードインしながら画像を表示していくjQueruプラグイン。

設置イメージ設置イメージ
Image Cross Fade Transitionの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>InnerFade with Jquery | 設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css"  type="text/css" media="all" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.whenloaded.js"></script>
        <script type="text/javascript">
            $(function(){
               $('<p id="message"></p>')
                    .append('Images are loading... (est waiting time: 10 secs)')
                    .insertBefore('#thumbnails');
                $('#thumbnails img')
                    .css({opacity: 0,height: 0,width: 0})
                    .whenLoaded(function(){
                        $('#message').slideUp(function(){
                        $(this).remove();
                    });
                    var all = $(this);
                    function fadeIn(i) {
                        if(!all[i]) { return; }
                        $(all[i]).animate({opacity: 1,height: '75px',width: '75px'},400);
                        setTimeout(function(){fadeIn(i+1);},200);
                    }
                    fadeIn(0);
                });
            });
        </script>
        <style type="text/css">
            #thumbnails {
                margin:0; padding:0;
                width:500px; height:300px;
                background:gold;
            }
            #thumbnails img {
                display: inline;
                float: left;
                margin: 8px;
                padding: 3px;
                background: white;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <h1><a href='http://medienfreunde.com/lab/innerfade/'>InnerFade with Jquery</a> | 設置サンプル</h1>
        <p>▼読込んだ画像を隠しておき、すべての画像が読込まれたら順番にフェードインしながら画像を表示していきます。</p>
<!-- CODE -->
        <div id="thumbnails" class="cf">
            <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_s.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_s.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" height="75" width="75" />
            <img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" height="75" width="75" />
        </div>
<!-- / CODE -->
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2025 PHP & JavaScript Room All Rights Reserved.

pagetop