Search
  1. Animated Hover Plugin〔要素のマウスオーバー時のhover効果をアニメーション〕
  2. Text with Moving Backgrounds with jQuery〔テキストの背景をアニメーション〕
  3. Animate a hover with jQuery〔ブロック要素をシャッターのように上下左右にスライドアニメーション〕
  4. Animate Curtains Opening with jQuery〔劇場風のカーテンを左右に開くアニメーションをjQueryで行う方法〕
  5. Animated Collapsible DIV〔ブロック要素をスムーズにスライドダウン・アップ〕
  6. Creating a fading header〔ヘッダのロゴにフェード効果をつける〕
  7. Creating Transparent Gradients With jQuery〔画像に透過グラデーションをかける〕
  8. Drop Shadow〔要素に影を付ける〕
  9. Garage Door Style Menu (using Animated Background Images with jQuery)〔画像にガレージのシャッターを開閉するようなアニメーション効果を付ける〕
  10. How to create Skype-like buttons using jQuery〔Skypeのようにマウスオーバーするとアイコンがアニメーションするボタン〕
  11. jQuery Image Cube〔画像やテキストをキューブに見立てて回転〕
  12. jQuery look: Tim Van Damme〔アコーディオン効果とhover効果〕
  13. jQuery Plugin - Page Peel〔Webページに紙をめくる効果を付ける(SWF使用)〕
  14. jQuery Poof Effect〔かわいいアニメーション付きで要素を削除〕
  15. jQuery QuickFlip〔カードをめくるように要素をアニメーション〕
  16. jQuery Roundabout〔要素の回転〕
  17. JQuery Sprite Animation Plugin〔アニメーションプラグイン〕
  18. Kwicks for jQuery〔スムーズにアコーディオン〕
  19. Meerkat〔ページ上にアニメーション効果付きで要素をポップアウト〕
  20. seekAttention〔ユーザーに注目させたい要素を点滅させる〕
  21. Wilq32.RotateImage〔画像を指定した角度に回転して表示〕
  22. wSlide〔ブロック要素をエフェクト効果付きでスムーズにスライド〕
  23. jQuery illuminate〔要素にグロー効果を付けて光らせる(jQuery UI使用)〕

Animated Hover Plugin
要素のマウスオーバー時のhover効果をアニメーション

2010/2/24

Animated Hover Plugin for jQuery

jquery.js、jquery.ahover.js、jquery.dimensions.js

要素のマウスオーバー時のhover効果をアニメーションさせるjQueryプラグイン。

リスト要素の各アイテムにマウスオーバーした時に、そのアイテムの背後にjQueryでhover用の要素を動的に生成して、アニメーション表示させています。

幅、高さ、オフセットなどオブジェクトの位置情報を取得するjQuery Dimensions Pluginを併用しています。

このプラグインを適用する要素には、CSS上のルールがあります。

  • マウスオーバーされたアイテムの親要素には、position:relativeあるいはposition:absoluteが指定されていること。
  • マウスオーバーされたアイテムには、z-indexが指定されていること。
  • 動的に生成されたアイテムは、hoverされたアイテムのz-indexより小さいz-indexが指定されていること。
/* hoverされたアイテムの親要素 */
ul { position: relative; }
/* hoverされた要素 */
ul li {
    position: relative;
    z-index: 100;
}
/* 動的に生成されるhover要素 */
div.ahover {
    position: absolute;
    z-index: 99;
    background: #cef;
}
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.ahover.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
        <script type="text/javascript">
            $(function(){
                $('ul.menu li').ahover({toggleEffect: 'width'});
                $('ul.cards li').ahover({moveSpeed: 100, hoverEffect: function() {
                    $(this)
                        .css({opacity: 0.99})
                        .animate({opacity: 0.5}, 750)
                        .animate({opacity: 0.99}, 750)
                        .dequeue();
                    $(this).queue(arguments.callee);
                }});
                $('ul.letters li').ahover({toggleEffect: 'height', moveSpeed: 75, toggleSpeed: 250});
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
ul {
    clear:both;
    list-style-type:none;
    margin:20px; padding:0;
    position:relative;
    overflow:hidden;
}
li {
    list-style-type:none;
    margin:0; padding:0;
    position:relative;
    z-index:200;
    float:left;
}
ul.menu {
}
    ul.menu li {
        font-size:1.1em;
        clear:left;
        color:#222;
    }
    ul.menu li:hover {
        color:#134;
    }
    div.ahover {
        position:absolute;
    }
    ul.menu div.ahover {
        background:#adf;
        border:2px solid #cef;
        -webkit-border-radius:7px;
        -moz-border-radius:7px;
    }
ul.cards {
}
    ul.cards li {
        color:#eee;
        background:#222;
        text-align:center;
        margin:10px;
        width:10em; height:6em;
        -webkit-border-radius:3px;
        -moz-border-radius:3px;
        border:3px solid #111;
    }
    ul.cards li:hover {
        color:#f43;
    }
    ul.cards li span {
        display:block;
        margin:0; padding:0;
        font-size:3em;
    }
    ul.cards div.ahover {
        background:red;
        padding:3px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border:1px solid red;
    }
ul.letters {
    font-size:2em;
    font-weight:bold;
}
    ul.letters li {
        color:#abb;
        padding:5px 10px;
        line-height:1;
    }
    ul.letters li:hover {
        color:#fff;
    }
    ul.letters div.ahover {
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        background:#ff6699;
    }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://code.google.com/p/jquery-ahover/wiki/Documentation'>Animated Hover Plugin for jQuery</a></p>
<!-- CODE -->
            <ul class="menu">
                <li>PHP</li>
                <li>JavaScript/DOM</li>
                <li>Ajax</li>
                <li>音声・動画配信</li>
                <li>Web関連特集</li>
            </ul>
             
            <ul class="cards">
                <li>クローバー<span>&#9827;</span></li>
                <li>ダイヤ<span>&#9830;</span></li>
                <li>ハート<span>&#9829;</span></li>
                <li>スペード<span>&#9824;</span></li>
            </ul>

            <ul class="letters">
                <li>P</li><li>H</li><li>P</li><li>&amp;</li><li>J</li><li>a</li><li>v</li><li>a</li><li>S</li><li>c</li><li>r</li><li>i</li><li>p</li><li>t</li><li>R</li><li>o</li><li>o</li><li>m</li>
            </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

Text with Moving Backgrounds with jQuery
テキストの背景をアニメーション

2010/2/22

Text with Moving Backgrounds with jQuery

jquery.js、move-bg.js

テキストの背景がアニメーションしているように見せる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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/move-bg.js"></script>
        <script type="text/javascript">
            $(function(){
                moveBgAround();
            });
            function moveBgAround() {
                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();
                });
            }
        </script>
        <!-- CSS -->
        <style type="text/css">
            body { background:#000; color:#fff; }
            #demo { width:500px; overflow:hidden; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照: <a href='http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/'>Text with Moving Backgrounds with jQuery</a></p>
<!-- CODE -->
            <div id="demo">
            <div class='scrollBg' style='background-image: url("/content/img/pattern/star.jpg")'> 
                <img src='/content/img/ajax/textbackground.png' alt='' /> 
            </div> 
            <div class='scrollBg' style='background-image: url("/content/img/pattern/snow.gif")'> 
                <img src='/content/img/ajax/textbackground.png' alt='' /> 
            </div> 
<!-- / CODE -->
        </div>
    </body>
</html>

Animate a hover with jQuery
ブロック要素をシャッターのように上下左右にスライドアニメーション

2008/12/27

Animate a hover with jQuery

jquery.js v1.2.6、jquery.imagecube.js

ブロック要素を2つ重ねておき、上の要素にマウスオーバーするとシャッターのように上下左右方向にスライドして、下の要素を表示する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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.imagecube.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 下→上、上→下 */
                $('ul.hover_block li').hover(function(){
                    $(this).find('img').animate({top:'180px'},{queue:false,duration:500});
                }, function(){
                    $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
                });
                /* 左→右、右→左 */
                $('ul.hover_block2 li').hover(function(){
                    $(this).find('img').animate({left:'300px'},{queue:false,duration:500});
                }, function(){
                    $(this).find('img').animate({left:'0px'},{queue:false,duration:500});
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #demo ul {
                clear:both;
            }
            #demo li {
                list-style:none;
                float:left;
                background:#000;
                padding:10px;
                width:240px; /* 画像の幅 */
                position:relative;
                margin-right:20px;
                overflow:hidden;
            }
            #demo li a {
                display:block;
                position:relative;
                overflow:hidden;
                padding:16px;
                width:218px;    /* 画像の幅 - 32px */
                height:148px;    /* 画像の高さ - 32px */
                text-decoration:none;
                color:#fff;
                font-size:11px;
            }
            #demo li img {
                position:absolute;
                top:0; left:0;
                border:0;
            }
            #demo li a strong {
                display:block;
                font-size:1.2em;
                font-weight:bold;
                margin:0 0 5px 0;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.incg.nl/blog/2008/hover-block-jquery/'>Animate a hover with jQuery</a></p>
<!-- CODE -->
            <div id="demo" class="cf">
                <ul class="hover_block">
                    <li><a href="/"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" title="くまさんケーキ" /><strong>くまさんケーキ</strong>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</a></li>
                   <li><a href="/"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" title="クリスピー・クリーム・ドーナツ" /><strong>クリスピー・クリーム・ドーナツ</strong>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ(Krispy Kreme Doughnuts)」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
</a></li>
                </ul>
                <ul class="hover_block2">
                    <li><a href="/"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" title="くまさんケーキ" /><strong>くまさんケーキ</strong>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</a></li>
                    <li><a href="/"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" title="クリスピー・クリーム・ドーナツ" /><strong>クリスピー・クリーム・ドーナツ</strong>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ(Krispy Kreme Doughnuts)」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
</a></li>
                </ul>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

Animate Curtains Opening with jQuery
劇場風のカーテンを左右に開くアニメーションをjQueryで行う方法

2010/1/6

Animate Curtains Opening with jQuery

jquery.js、jquery.easing.js v1.3

劇場風のカーテンを左右に開閉させるアニメーションをjQueryで行う方法が掲載されています。 滑らかな動きを付けるためにjquery.easing.jsも使用されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function(){
            $curtainopen = false;
                $(".rope").click(function(){
                    $(this).blur();
                    if ($curtainopen == false){ 
                        $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                        $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                        $(".rightcurtain").stop().animate({width:'60px'},2000 );
                        $curtainopen = true;
                    }else{
                        $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                        $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                        $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                        $curtainopen = false;
                    }
                    return false;
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #container {
                text-align:center;
                background:#4f3722 url('/content/img/ajax/curtains/darkcurtain.jpg') repeat-x;
                position:relative;
                height:495px;
            }
            .leftcurtain{
                width:50%; height:495px;
                top:0; left:0;
                position: absolute;
                z-index: 2;
            }
             .rightcurtain{
                width:51%; height:495px;
                right:0; top:0;
                position:absolute;
                z-index:3;
            }
            .rightcurtain img,
            .leftcurtain img{
                width:100%; height:100%;
            }
            .logo{
                margin:100px auto 0 auto;
            }
            .rope{
                position:absolute;
                top:-40px; left:70%;
                z-index:4;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/'>Animate Curtains Opening with jQuery</a></p>
<!-- CODE -->
            <div id="container">
                <div class="leftcurtain"><img src="/content/img/ajax/curtains/frontcurtain.jpg"/></div>
                <div class="rightcurtain"><img src="/content/img/ajax/curtains/frontcurtain.jpg"/></div>
                <img class="logo" src="/content/img/ajax/curtains/logo.png"/>
                <a class="rope" href="#">
                    <img src="/content/img/ajax/curtains/rope.png"/>
                </a>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

Animated Collapsible DIV
ブロック要素をスムーズにスライドダウン・アップ

2008/11/15

Animated Collapsible DIV v2.01

Firefox 1+、IE 6+、Opera 9+
jquery.js v1.2.6、animatedcollapse.js

ブロック要素をスライドダウン・アップ切替したり、個別にスライドダウン、スライドアップさせるjQueryプラグイン。 複数のブロック要素ををグループ化すると、アコーディオンタイプになります。 また、任意の要素IDを配列でしていしてスライドダウン・アップを一括切替することも可能です。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/animatedcollapse.js"></script>
        <script type="text/javascript">
            /* Sample 1 */
            animatedcollapse.addDiv('doughnuts', 'fade=1,height=180px')
            animatedcollapse.addDiv('bearcake', 'fade=1,height=180px')
            animatedcollapse.addDiv('cafeeat', 'fade=1,height=180px')
            /* Sample 2 */
            animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=nabe')
            animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=nabe,persist=1,hide=1')
            animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=nabe,hide=1')
            /* 初期化 */
            animatedcollapse.init()
        </script>
        <!-- JS / -->
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm'>Animated Collapsible DIV v2.01</a></p>
<!-- Sample 1 -->
            <h2>要素のスライドダウン・アップ</h2>
            <p>
                <a href="javascript:animatedcollapse.show(['doughnuts', 'bearcake', 'cafeeat'])">例1~3を表示する</a>
                 | 
                <a href="javascript:animatedcollapse.hide(['doughnuts', 'bearcake', 'cafeeat'])">例1~3を非表示にする</a>
            </p>
            <div class="cf">

                <!-- doughnuts -->
                <div style="float:left; margin:10px 10px 10px 0; width:320px;">
                    <h3>例1:クリスピー・クリーム・ドーナツ</h3>
                    <p><button onclick="animatedcollapse.toggle('doughnuts')">スライドダウン・アップ切替</button></p>
                    <p><a href="javascript:animatedcollapse.show('doughnuts')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('doughnuts')">スライドアップ</a></p>
                    <div id="doughnuts" style="width:240px; display:none"><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></div>
                </div>
                <!-- doughnuts / -->

                <!-- bearcake -->
                <div style="float:left; margin:10px 10px 10px 0; width:320px;">
                    <h3>例2:くまさんケーキ</h3>
                    <p><button onclick="animatedcollapse.toggle('bearcake')">スライドダウン・アップ切替</button></p>
                    <p><a href="javascript:animatedcollapse.show('bearcake')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('bearcake')">スライドアップ</a></p>
                    <div id="bearcake" style="width:240px; display:none"><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></div>
                </div>
                <!-- bearcake / -->

                <!-- cafeeat -->
                <div style="float:left; margin:10px 10px 10px 0; width:320px;">
                    <h3>例3:CAFE EAT@代官山</h3>
                    <p><button onclick="animatedcollapse.toggle('cafeeat')">スライドダウン・アップ切替</button></p>
                    <p><a href="javascript:animatedcollapse.show('cafeeat')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('cafeeat')">スライドアップ</a></p>
                    <div id="cafeeat" style="width:240px; display:none"><a href="http://www.flickr.com/photos/22559849@N06/2973352946/" title="CAFE EAT@3 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@3" /></a></div>
                </div>
                <!-- cafeeat / -->

            </div>
            <hr style="margin: 1em 0" />
<!-- Sample 1 / -->

<!-- Sample 2 -->
            <h2>要素のスライドダウン・アップ(グループ化)</h2>
            <p>グループ内で1要素のみが開くタイプのアコーディオン。</p>

            <!-- cat -->
            <p><button onclick="animatedcollapse.toggle('cat')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('cat')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('cat')">スライドアップ</a></p>
            <div id="cat" style="width: 400px; background: #bdf381;">
                The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
            </div>
            <!-- cat / -->

            <!-- dog -->
            <p><button onclick="animatedcollapse.toggle('dog')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('dog')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('dog')">スライドアップ</a></p>
            <div id="dog" style="width: 400px; background: #bdf381;">
                The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
            </div>
            <!-- dog / -->

            <!-- rabbit -->
            <p><button onclick="animatedcollapse.toggle('rabbit')">スライドダウン・アップ切替</button> <a href="javascript:animatedcollapse.show('rabbit')">スライドダウン</a> || <a href="javascript:animatedcollapse.hide('rabbit')">スライドアップ</a></p>
            <div id="rabbit" style="width: 400px; background: #bdf381">
                Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
            </div>
            <!-- rabbit / -->

<!-- Sample 2 / -->
        </div>
    </body>
</html>

Creating a fading header
ヘッダのロゴにフェード効果をつける

2008/11/16

Creating a fading header

jquery.js v1.2.6、jquery.easing.js v1.3

ロゴ画像にマウスオーバーした時に、ロゴ画像にフェード効果を付ける方法が掲載されています。 フェードイン、フェードアウト時のロゴ画像を1枚の画像にしておき、マウスオーバー時、マウスアウト時で、背景画像の位置を変更してフェードさせています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            var Header = {
                addFade:function(selector){
                    $("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector)); 
                    $(selector+" a").bind("mouseenter",function(){
                        $(selector+" .fake-hover").fadeIn("slow");
                    });
                    $(selector+" a").bind("mouseleave",function(){
                        $(selector+" .fake-hover").fadeOut("slow");
                    });
                }
            };
            $(function(){
                Header.addFade("#header");
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            /* 背景画像指定 */
            #header { margin:0; padding:0; text-indent:-9999px; width:498px; height:118px; position:relative; margin-left:-1em; background:url("/content/img/ajax/awesomeheader.png") no-repeat; }
            #header a { position:absolute; top:0; left:0; width:498px; height:118px; display:block; border:0; background:transparent; overflow:hidden; }
            /* マウスオーバー時に背景画像の位置を変更 */
            #header .fake-hover { margin:0; padding:0; width:498px; height:118px; display:block; position:absolute; top:0; left:0; background:url("/content/img/ajax/awesomeheader.png") no-repeat 0 -118px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://swedishfika.com/2008/03/04/creating-a-fading-header/'>Creating a fading header</a></p>
            <p>▼ロゴにマウスオーバーすると、ロゴがフェードします。</p>
<!-- CODE -->
            <div id="header"><a href="#">PHP & JavaScript Room</a></div>
<!-- CODE / -->
        </div>
    </body>
</html>

Creating Transparent Gradients With jQuery
画像に透過グラデーションをかける

unknown

Creating Transparent Gradients With jQuery

jquery.js

画像に透過グラデーションをかける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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                // Get all of the gradient images and loop
                // over them using jQuery implicit iteration.
                $("img.gradient").each(
                    function(intIndex){
                        var jImg=$(this);
                        var jParent=null;
                        var jDiv=null;
                        var intStep=0;
                        /* 親要素を取得 */
                        jParent=jImg.parent();
                        /* 親要素の位置に「relative」を指定 */
                        jParent.css( "position", "relative" ).width( jImg.width()).height( jImg.height());
                        /* グラーデーション用要素を作成 */
                        for (intStep=0; intStep<=20; intStep++){
                            /* フェード用ラベルを作成 */
                            jDiv=$("<div></div>");
                            /* フェード用要素にプロパティを設定 */
                            jDiv
                                .css ({
                                        backgroundColor:"#ffffff",
                                        opacity:(intStep*5/100),
                                        bottom:((100-(intStep*5))+"px"),
                                        left:"0px",
                                        position:"absolute"
                                    })
                                .width(jImg.width())
                                .height(5);
                            /* フェード用要素を親要素に結合 */
                            jParent.append(jDiv);
                        }
                    });
            });
        </script>
        <!-- JS / -->
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm'>Creating Transparent Gradients With jQuery</a></p>
<!-- CODE -->
            <h2>元画像</h2>
            <p><img src="/content/img/pic1.png" width="320" height="240" alt="Doughnuts"    /></p>

            <h2>透過グラーデーションをかけた画像</h2>
            <p><img src="/content/img/pic1.png" width="320" height="240" alt="Doughnuts" class="gradient" /></p>
<!-- CODE / -->
        </div>
    </body>
</html>

Drop Shadow
要素に影を付ける

2009/4/11

Drop Shadow

jquery.js v1.2.6+、jquery.dropshadow.js

要素に影を付けるjQueryプラグイン。

画像、p要素、input要素、select要素、テキストなど、さまざま要素に影を付けることができます。 オプションで、影の位置(left、top)、透明度(opacity)、色(color)、swap効果の有無(swap)、ぼかしの強さ(blur)を指定することができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript"  src="/content/lib/jquery/jquery.dropshadow.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#exp1").dropShadow();
                $("#exp2").dropShadow({left: 8, top: 10, opacity: 0.8, blur: 4});
                $("#exp3").dropShadow({left: 2, top: 2, blur: 1, color: "#03f", swap: true});
                $("#exp4").dropShadow({left: 10, top: 10, blur: 3});
                $("input:text, input:button").dropShadow({left: 3, top: 3});
                $("select#exp").dropShadow({left: -1, top: -1});
                $("hr").dropShadow({left: -18, top: -18});
                $("p").dropShadow({left: 6, top: 6, blur: 3});
                $("#photo").dropShadow({left: 8, top: 8, blur: 3, opacity: 0.8});
                $("#photoWrapper").draggable().css("z-index", 2000);
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            h2 { font-size:20px; margin:0 0 20px 0; padding:0; }
            p { margin:0 0 20px 0; padding:0;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://eyebulb.com/dropshadow/'>Drop Shadow</a></p>
            <p>▼指定した要素に影を付けます。</p>
<!-- CODE -->
            <h2 id="exp1">PHP & JavaScript Room</h2>
            <h2 id="exp2">PHP & JavaScript Room</h2>
            <h2 id="exp3">PHP & JavaScript Room</h2>
            <p>P要素に影を付けます。</p>
            <input type="text" value="テキストボックス" /><br><br>
            <input type="button" value="ボタン" /><br><br>
            <select id="exp">
                <option value="Default">Default</option>
                <option value="Soft">Soft</option>
                <option value="Sharp">Sharp</option>
                <option value="Embossed">Embossed</option>
                <option value="Engraved">Engraved</option>
                <option value="Glow">Glow</option>
            </select><br><br>
            <div id="photoWrapper">
                <div style="position:relative;">
                    <img id="photo" src="/content/img/vistaicon/internet.png" alt="Photo" />
                </div>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

Garage Door Style Menu (using Animated Background Images with jQuery)
画像にガレージのシャッターを開閉するようなアニメーション効果を付ける

2008/12/4

Garage Door Style Menu (using Animated Background Images with jQuery)

jquery.js v1.2.6、jquery.backgroundPosition.js

画像にガレージのシャッターを開閉するようなアニメーション効果を付けるjQueryプラグイン。 ガレージ内に表示する画像は、1枚の画像として結合しておく必要があります。 ガレージの枠とシャッター部分の画像が、PSD形式で同梱されているのもうれしい限り。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.backgroundPosition.js"></script>
        <script type="text/javascript">
            $(function(){
                //Set css in Firefox (Required to use the backgroundPosition js)
                $('#shutter1').css({backgroundPosition: '0px 0px'});
                $('#shutter2').css({backgroundPosition: '0px 0px'});
                $('#shutter3').css({backgroundPosition: '0px 0px'});
                $('#shutter4').css({backgroundPosition: '0px 0px'});
                //Animate the shutter
                $(".link").hover(function(){
                      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500 );
                    }, function() {
                      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500 );
                }); 
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul#menuback { margin:0;padding:0; list-style:none; background:url("/content/img/ajax/garage_door_style_menu/menu-bg.jpg"); width:800px; overflow:hidden; }
            ul#menuback li { margin:0; padding:0; }
            ul#menuback li.shutter { width:200px; height:100px; display:block; float:left; }
            ul#menuback li#shutter1 { background:url("/content/img/ajax/garage_door_style_menu/shutter-1.jpg") no-repeat; }
            ul#menuback li#shutter2 { background:url("/content/img/ajax/garage_door_style_menu/shutter-2.jpg") no-repeat;  }
            ul#menuback li#shutter3 { background:url("/content/img/ajax/garage_door_style_menu/shutter-3.jpg") no-repeat; }
            ul#menuback li#shutter4 { background:url("/content/img/ajax/garage_door_style_menu/shutter-4.jpg") no-repeat; }
            a.link { width:200px; height:100px; display:block; background:url("/content/img/ajax/garage_door_style_menu/window.png") no-repeat bottom center; text-indent:-9999px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://css-tricks.com/garage-door-style-menu-using-animated-background-images-with-jquery/'>Garage Door Style Menu (using Animated Background Images with jQuery)</a></p>
            <p>▼マウスオーバーすると、シャッターのように開いて画像が見えます。マウスアウトすると閉じます。</p>
<!-- CODE -->
            <ul id="menuback">
                <li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
                <li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
                <li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
                <li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
            </ul>
<!-- CODE / -->
        </div>
    </body>
</html>

How to create Skype-like buttons using jQuery
Skypeのようにマウスオーバーするとアイコンがアニメーションするボタン

2009/3/19

How to create Skype-like buttons using jQuery

jquery.js

jQueryを使用して、Skypeのようにマウスオーバーするとアイコンがアニメーションするボタンを作成する方法が掲載されています。

a要素にマウスオーバーした時(hoverイベント)に、a要素の子要素であるimg要素の表示位置(position)をアニメーションしながら変更しています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".button").hover(function(){
                    $(this).find("img")
                    .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
                    .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
                    .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .button {
                position:relative;
                height:14px;
                margin:0 10px 0 20px; padding:5px 10px 5px 15px;
                cursor:pointer;
                display:inline-block;
                font-size:11px;
                text-decoration:none;
                background:#fff;
                font-weight:bold;
                -moz-border-radius-bottomleft:5px;
                -moz-border-radius-bottomright:5px;
                -moz-border-radius-topleft:5px;
                -moz-border-radius-topright:5px;
            }
            .button img {
                position:absolute;
                top:-4px; left:-12px;
                border:0;
            }
            .btn_send {
                border:solid 1px #63D517;
                color:#63D517;
            }
                .btn_send:hover {
                    background:#CDFFAF;
                }
            .btn_cancel {
                border:solid 1px #FF8358;
                color:#FF8358;
            }
                .btn_cancel:hover {
                    background:#FFC7AF;
                }
            fieldset {
                padding:10px;
                width:350px;
            }
            textarea {
                width:310px; height:10em;
                margin:0 20px;
            }
            .right {
                text-align:right;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.jankoatwarpspeed.com/post/2009/03/11/How-to-create-Skype-like-buttons-using-jQuery.aspx'>How to create Skype-like buttons using jQuery</a></p>
            <p>▼ボタンにマウスオーバーすると、アイコンがアニメーションします。</p>
<!-- CODE -->
            <fieldset>
                <legend>コメント</legend>
                <p><textarea></textarea></p>
                <p class="right">
                    <a class="button btn_send" href="#" onclick="return false;"><img src="/content/img/ajax/skype_like_buttons/btn_send.png" alt="" />送信する</a>
                      or 
                    <a class="button btn_cancel" href="#" onclick="return false;"><img src="/content/img/ajax/skype_like_buttons/btn_cancel.png" alt="" />キャンセル</a>
                </p>
            </fieldset>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Image Cube
画像やテキストをキューブに見立てて回転

2008/12/21

jQuery Image Cube

jquery.js v1.2.6、jquery.imagecube.js

画像やテキストをキューブ状に見立てて、上下左右・ランダムに回転できる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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.imagecube.js"></script>
        <script type="text/javascript">
            $(function(){
                /* デフォルト */
                $('#defaultCube').imagecube();
                $.imagecube.setDefaults({
                    imagePath:'/content/lib/jquery/',
                    speed:1000,
                    pause:5000
                });
                $('#stopCube').toggle(function(){
                        $(this).text('再生'); 
                        $('#defaultCube').imagecube('stop');
                    }, function() { 
                        $(this).text('停止');
                        $('#defaultCube').imagecube('start');
                    } 
                ); 
                $('#removeCube').toggle(function(){
                        $(this).text('再設定');
                        $('#defaultCube').imagecube('destroy');
                    }, 
                    function(){ 
                        $(this).text('削除');
                        $('#defaultCube').imagecube();
                    } 
                );
                /* コントロールオプション */
                $('#directionCube').imagecube({
                    direction: 'up',
                    repeat: false
                });
                $('#directionButton').click(function(){
                    var cube = $('#directionCube'); 
                    cube.imagecube('change', {direction: $('#direction').val()}).
                        imagecube('rotate', function(){
                            $('#current').text($(cube.imagecube('current')).attr('title')); 
                        }); 
                });
                /* テキストキューブ */
                $('#textCube').imagecube();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #defaultCube,
            #directionCube { width:240px; height:180px; }
            #textCube { width:280px; height:200px; }
            #textCube h3 { margin:10px; font-size:1.2em; }
            #textCube div.cf { line-height:2em; clear:both; padding:10px;}
            #textCube .box1 { background-color:#ffffcc; padding:3px 3px; border:5px solid #ff8800; }
            #textCube .box2 { background-color:#A42127; padding:3px 3px; border:5px solid #C17625; color:#fff; }
            #textCube .box3 { background-color:#D9E09A; padding:5px 5px; border:5px solid #B2B959; }
            #textCube img { float:left; width:75px; height:75px; margin:0 10px 5px 0; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://keith-wood.name/imageCube.html'>jQuery Image Cube</a></p>
<!-- CODE -->
            <h2>デフォルト</h2>
            <p>
                <button id="stopCube">停止</button>
                <button id="removeCube">削除</button>
            </p>
            <div id="defaultCube"> 
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" title="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" title="クリスピー・クリーム・ドーナツ" />
                <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" title="Cafe EAT" />
                <img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_m.jpg" title="みかん星人" />
            </div>

            <h2>コントロールオプション</h2>
            <p>
                <select id="direction">
                    <option value="up">上へ</option>
                    <option value="down">下へ</option>
                    <option value="left">左へ</option>
                    <option value="right">右へ</option>
                    <option value="random">ランダムに</option>
                </select>
                <button id="directionButton">回転</button>
            </p>
            <div id="directionCube">
                <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" title="くまさんケーキ" />
                <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" title="クリスピー・クリーム・ドーナツ" />
                <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e_m.jpg" title="Cafe EAT" />
                <img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_m.jpg" title="みかん星人" />
            </div>
            <p>
                Now showing: <span id="current">くまさんケーキ</span>
            </p>

            <h2>テキストキューブ</h2>
            <div id="textCube">
                <div class="box1">
                    <h3>バニラミルクフラペチーノ@STARBUCKS</h2>
                    <div class='cf'>
                        <img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_s.jpg" title="バニラミルクフラペチーノ@STARBUCKS" />
                        クリーミーでミルキーなフラペチーノ!チョコやキャラメル系も好きだけど、こういうシンプルなのも好き。
                    </div>
                </div>
                <div class="box2">
                    <h3>ダークチェリーモカ@STARBUCKS</h2>
                    <div class='cf'>
                        <img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_s.jpg" title="ダークチェリーモカ@STARBUCKS" />
                        ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね!
                    </div>
                </div>
                <div class="box3">
                    <h3>抹茶フローズンクリーム@STARBUCKS</h2>
                    <div class='cf'>
                        <img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_s.jpg" title="抹茶フローズンクリーム@STARBUCKS" />
                        まだ寒いのに、フローズン!しかも照らす席(汗;クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。
                    </div>
                </div>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

jQuery look: Tim Van Damme
アコーディオン効果とhover効果

unknown

jQuery look: Tim Van Damme

jquery.js

jQueryでアコーディオン効果とhover効果を使用したコンテンツを作成するためのチュートリアルが掲載されています。

hover効果のサンプルとして、ソーシャルネットワークやブログなどのリンクをまとめたプロフィールサイト風リンク集、 アコーディオン効果のサンプルとして、簾のように上下に伸縮するタブ切替コンテンツが紹介されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* hover */
                $('#content a').each(function () {
                    $('<div class="fader" />').css('opacity', 0).prependTo(this);
                }).hover(function () {
                    $('img', this).stop().animate({
                        marginLeft:5
                    }, 250);
                    $('.fader', this).stop().animate({
                        opacity:0.15
                    });
                    }, function () {
                        $('img', this).stop().animate({
                        marginLeft:10
                    }, 250);
                    $('.fader', this).stop().animate({
                        opacity:0
                    });
                }).find('img').css('marginLeft', 10);

                /* accordion */
                $('.navigation').each(function () {
                    var $links = $(this).find('a'),
                    panelIds = $links.map(function() { return this.hash; }).get().join(","),
                    $panels = $(panelIds),
                    $panelwrapper = $panels.filter(':first').parent(),
                    delay = 500,
                    heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
                    $panels.hide();
                    $links.click(function () {
                        var link = this, 
                        $link = $(this);
                        // ignore if already visible
                        if ($link.is('.selected')) return false;
                        $links.removeClass('selected');
                        $link.addClass('selected');
                        document.title = 'jQuery look:Tim Van Damme - ' + $link.text();
                        if ($.support.opacity) $panels.stop().animate({opacity:0 }, delay);
                        $panelwrapper.stop().animate({
                            height:0
                        }, delay, function () {
                            var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
                            $panelwrapper.animate({
                                height:height
                            }, delay);
                        });
                    });
                    $links.filter(window.location.hash ? '[hash=' + window.location.hash + ']':':first').click();
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #wrap {
                width:470px;
            }
            /* hover */
            #content {
                padding:0 10px;
                background:url("/content/img/ajax/content.png") repeat-y;
            }
            #content ul {
                float:left;
                display:block;
                width:450px;
                margin:0; padding:0;
                background:url("/content/img/ajax/networks.png") repeat;
                list-style:none;
            }
            #content li {
                margin:0; padding:0;
                list-style:none;
                float:left;
                width:225px; height:60px;
                position:relative;
                line-height:1;
            }
            #content a {
              font-size:1em;
              color:#666;
              text-decoration:none;
              padding:10px 0 5px;
              display:block;
              width:225px; height:45px;
              position:relative;
              z-index:2;
            }
            #content a img {
              border:0;
              float:left;
              margin:0 10px; padding:0;
              width:32px; height:32px;
            }
            #content a div.fader {
                opacity:0;
                -moz-opacity:0;
                filter:alpha(opacity=0);
                position:absolute;
                top:0;  left:0;
                width:100%; height:60px;
            }
            #content a:hover img {
                margin-left:5px;
            }
            #content a strong {
                display:block;
                font-size:18px;
                color:#000;
            }
            /* accordion */
            #datacontent {
                margin:0; padding:0px 10px;
            }
            #datacontent ul {
                list-style:none;
                margin:0; padding:5px;
                display:block;
                height:30px;
                background:#dfdfdf;
                -moz-border-radius-topleft:10px;
                -moz-border-radius-topright:10px;  
                -webkit-border-top-left-radius:10px;
                -webkit-border-top-right-radius:10px;
            }
            #datacontent li {
                list-style:none;
                margin:0; padding:0;
                float:left;
            }
            #datacontent li a {
                outline:0;
                display:block;
                background:#dfdfdf;
                color:#666;
                text-decoration:none;
                margin:5px; padding:1px 5px;
                border:1px solid #dfdfdf;
            }
            #datacontent li a:hover {
                border:1px solid #d1d1d1;
                background:#d1d1d1;
                color:#000;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
            }
            #datacontent li a.selected {
                background:#afafaf;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
                border:1px inset #fff;
                color:#fff;
            }
            #datacontent .panels {
                border:1px solid #dfdfdf;
                border-top:0;
                border-bottom:10px solid #dfdfdf;
                -moz-border-radius-bottomleft:10px;
                -moz-border-radius-bottomright:10px;
                -webkit-border-bottom-right-radius:10px;
                -webkit-border-bottom-left-radius:10px;
                overflow:hidden;
            }
            #datacontent .panelsinner {
                overflow:hidden;
            }
            #datacontent .panel {
                background:#fff;
                padding:20px;
            }
            #datacontent h2 {
                margin:0; padding:0;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://jqueryfordesigners.com/jquery-look-tim-van-damme/'>jQuery look:Tim Van Damme</a></p>
<!-- CODE -->
            <h2>hover効果:プロフィールサイト風リンク集</h2>
            <div id="content">
                <ul>
                    <li><a href="http://twitter.com/"><img src="/content/img/sns/twitter_32.png" /><strong>Twitter</strong>twitter.com</a></li>
                    <li><a href="http://delicious.com/"><img src="/content/img/sns/delicious_32.png" /><strong>Delicious</strong>delicious.com</a></li>
                    <li><a href="http://www.tumblr.com/"><img src="/content/img/sns/tumblr_32.png" /><strong>Tumblr</strong>www.tumblr.com</a></li>
                    <li><a href="http://www.flickr.com/"><img src="/content/img/sns/flickr_32.png" /><strong>Flickr</strong>flickr.com</a></li>
                    <li><a href="http://www.evernote.com/"><img src="/content/img/sns/evernote_32.png" /><strong>Evernote</strong>www.evernote.com</a></li>
                    <li><a href="http://friendfeed.com/"><img src="/content/img/sns/friendfeed_32.png" /><strong>FriendFeed</strong>friendfeed.com</a></li>
                    <li><a href="http://www.facebook.com/"><img src="/content/img/sns/facebook_32.png" /><strong>Facebook</strong>www.facebook.com</a></li>
                    <li><a href="https://www.blogger.com/"><img src="/content/img/sns/blogger_32.png" /><strong>Blogger</strong>www.blogger.com</a></li>
                </ul>
                <br clear="all" />
            </div><!-- #content -->

            <h2>アコーディオン効果:簾のように上下に伸縮するタブ切替コンテンツ</h2>
            <div id="datacontent">
                <ul class="navigation">
                    <li><a href="#php">PHP</a></li>
                    <li><a href="#jsdom">JavaScript/DOM</a></li>
                    <li><a href="#mobile">モバイル</a></li>
                    <li><a href="#strm">音声・動画配信</a></li>
                    <li><a href="#topics">Web関連特集</a></li>
                </ul>
                <div class="panels">
                    <div id="php" class="panel">
                        <h2>PHP</h2>
                        <p>Windows OSにPHPとApacheサーバーのインストール ~php.iniの設定まで、パソコンでPHPを使えるようになるまでの手順を図解。.htaccessの指定方法、使用頻度の高いPHP関数をサンプル付きで解説。Tipsでは実用的な自作関数を紹介。</p>
                    </div>
                    <div id="jsdom" class="panel">
                        <h2>JavaScript/DOM</h2>
                        <p>JavaScriptの基本~実用的な関数までサンプル付きで解説。ロールオーバー、ウィンドウ操作、連動プルダウン、入力チェック(正規表現含む)など、サイト制作に使える実用的なスクリプトを紹介。コピペで使えます。JavaScriptでDOM(Document Object Model)のメソッド・プロパティを使ってページ上のノードにアクセスするサンプルも追加しました。</p>
                    </div>
                    <div id="mobile" class="panel">
                        <h2>モバイル</h2>
                        <p> docomo(i-mode)、au(EZweb)、SoftBankの3大キャリア携帯サイトの作成方法。各キャリア毎に使用可能な要素(タグ)とその属性をリストアップ。</p>
                    </div>
                    <div id="strm" class="panel">
                        <h2>音声・動画配信</h2>
                        <p>Windows Media Player、RealPlayer、QuickTime、FlashPlayerのWebページ埋め込みによるストリーム配信方法を図・サンプルスクリプト付で解説。 表示するコントロールのカスタマイズ方法やメタファイル作成も。</p>
                    </div>
                    <div id="topics" class="panel">
                        <h2>Web関連特集</h2>
                        <p>RSSの受信・配信方法、HTML文法チェックやPageRank表示など無料で使えるSEOツール、アクセス解析で分かることなどSEO対策関連、Webページ作成に役立つフリーソフトやオンラインツール、サイトをグレードアップさせるブログパーツの紹介、IT用語やIPアドレスの調べ方など、知っておくといいかもな情報を特集。</p>
                    </div>
                </div>
            </div><!-- #datacontent -->
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Plugin - Page Peel
Webページに紙をめくる効果を付ける(SWF使用)

2009/2/24

jQuery Plugin - Page Peel

[JS]jquery.js、jQuery.pagePeel.js
[SWF]page-peel-small.swf、page-peel-big、page-peel-intro.swf
[画像]introAd.jpg、smallAd.jpg、smallBG.jpg、bigAd.jpg、bigBG.jpg、

SWFを使用して、Webページに紙をめくる効果を付けるjQueryプラグイン。

Webページに右上にマウスオーバーすると、ページがめくれ、めくれたページの下にCSSで指定した画像リンクが表示されます。 思わずクリックしたくなる、ユニークな広告スペースのアイデアです。 psd、flaファイルも同梱されています。 イントロアニメーションの有無、リンク先の指定はパラメータに指定することができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="/content/lib/jquery/page-peel/jQuery.pagePeel.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#pagePeel').pagePeel({
                    introAnim: true, /* イントロアニメーションあり */
                    adLink:'http://phpjavascriptroom.com/'
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://smple.com/2008/12/15/jquery-plugin-page-peel/'>jQuery Plugin - Page Peel</a>
            <p>画面右上のページがめくれている部分にマウスオーバーすると、背景に指定してある広告リンクが表示されます。</p>
<!-- CODE -->
            <div id="pagePeel"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery Poof Effect
かわいいアニメーション付きで要素を削除

2008/12/14

jQuery Poof Effect

[CSS]poof.css
[JS]jquery.js v1.2.6、poof.js

要素をクリックすると煙が消えるようなかわいいアニメーション付きでクリックした要素を削除するjQueryプラグイン。 下図のような、コマ送りをまとめた1枚の静止画像のCSSのポジションをJS側で制御することで、アニメーションを実装しています。 発想が面白いですね。 アニメーション用画像のPSDもダウンロードに同梱されています!

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/poofjs/poof.js"></script>
        <!-- CSS -->
        <style type="text/css">
            .example {
                width:500px;
            }
            .deleteme {
                background-color:#9cf;
                border:2px solid #36c;
                cursor:pointer;
                float:left;
                font-size:12px;
                font-weight:bold;
                height:24px;
                margin:0 10px 10px 0;
                text-align:center;
                width:80px;
                line-height:2;
            }
            .even {
                background-color:#ff8998;
                border-color:#d2412c;
            }
            .poof {
                background:transparent url("/content/lib/jquery/poofjs/poof.png") no-repeat 0 0;
                cursor:pointer;
                display:none;
                width:32px; height:32px;
                position:absolute;
            }
            * html body .poof {
                background:transparent url("/content/lib/jquery/poofjs/poof.gif") no-repeat 0 0;
            }
            .clear {clear:both;}
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.kombine.net/news/jquery-poof-effect/'>jQuery Poof Effect</a></p>
<!-- CODE -->
            <div class="example">
                <div class="poof"></div>
                <p>▼【delteme】クリックすると、アニメーション付きで要素を削除します。</p>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="deleteme">delete me</div>
                <div class="clear"></div>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

jQuery QuickFlip
カードをめくるように要素をアニメーション

2008/12/11

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

jquery.js、jquery.quickflip.js

カードをめくるように要素を回転させることができるjQueryプラグイン。

表パネルと裏パネル用に2枚の画像を用意し、クリックで表→裏、裏→表へ切り替えることができます。 回転方向はデフォルトでは水平方向になっていますが、垂直方向に回転させたい場合ははオプションで「vertical : true」を指定します。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.quickflip.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.quickFlip').quickFlip();
                $('.quickFlip2').quickFlip({
                    vertical : true
                });
        });
        </script>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/content/lib/jquery/quickflip" />
        <style type="text/css">
            .quickFlip,
            .quickFlip2 {
               width: 320px; height: 240px;
                position:relative;
                margin:20px;
            }
            .blackPanel {
                position:absolute;
                background:#fff url('/content/img/ajax/flip-panel-brown.png') no-repeat 0 0;
            }
            .redPanel {
                position:absolute;
                background:#fff url('/content/img/ajax/flip-panel.png') no-repeat 0 0;
                color:#fff;
            }
            .quickFlip h3,
            .quickFlip2 h3 {
                margin:70px 20px 10px 20px; padding:0;
                font-size:120%;
            }
            .quickFlip p,
            .quickFlip2 p {
                margin:10px 20px 0 20px; padding:0;
                
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://jonraasch.com/blog/quickflip-jquery-plugin'>QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler</a></p>
<!-- CODE -->
            <h2>水平方向に回転(デフォルト)</h2>
            <div class="quickFlip">
                <div class="blackPanel">
                    <h3 class="first quickFlipCta">サイトの紹介</h3>
                    <p class="panel-content">PHP、JavaScript、スタイルシート、Webページ埋め込みによる音声・動画のストリーム配信方法など、サイト作成に役立つ実用的なプログラミング・テクニックを解説しています。</p>
                    <p><a href="#" class="quickFlipCta">カードを裏返す</a></p>
                </div>
                <div class="redPanel">
                    <h3>管理人の紹介</h3>
                    <p>ブログ全盛期にWebサイトを運営するシーラカンスぶり。趣味は美味しい飲み屋さん探し。白モツが恋人です&hearts;&nbsp;そして、柄にもなく大のハムスター好き。あ、ペンギンも好きですよw</p>
                    <p><a href="#" class="quickFlipCta">カードを裏返す</a></p>
                </div>
            </div>
            <h2>垂直方向に回転(vertical:true)</h2>
            <div class="quickFlip2">
                <div class="blackPanel">
                    <h3 class="first quickFlipCta">サイトの紹介</h3>
                    <p class="panel-content">PHP、JavaScript、スタイルシート、Webページ埋め込みによる音声・動画のストリーム配信方法など、サイト作成に役立つ実用的なプログラミング・テクニックを解説しています。</p>
                    <p><a href="#" class="quickFlipCta">カードを裏返す</a></p>
                </div>
                <div class="redPanel">
                    <h3>管理人の紹介</h3>
                    <p>ブログ全盛期にWebサイトを運営するシーラカンスぶり。趣味は美味しい飲み屋さん探し。白モツが恋人です&hearts;&nbsp;そして、柄にもなく大のハムスター好き。あ、ペンギンも好きですよw</p>
                    <p><a href="#" class="quickFlipCta">カードを裏返す</a></p>
                </div>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

jQuery Roundabout
要素の回転

2010/2/9

jQuery Roundabout

jquery.js、jquery.roundabout.js

要素をターンテーブルのように回転するjQueryプラグイン。 カスタマイズ性が高く、拡張プラグイン「Roundabout Shapes」を使用することで、様々な方向や方法で回転させることができます。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.roundabout-1.0.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function(){
                $('ul#myRoundabout').roundabout();
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            .wrap {
                margin:0 auto; padding:10px 30px;
                background:#fff;
                border:1px solid #ccc;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                width:600px;
            }
            ul {
                list-style:none;
            }
            li {
                list-style:none;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href="http://fredhq.com/projects/roundabout/">jQuery Roundabout</a></p>
<!-- CODE -->
            <h2>基本</h2>
            <style type="text/css">
                #example1 .roundabout-holder {
                    width:90%;
                    height:10em;
                    margin:1em auto;
                }
                #example1 .roundabout-moveable-item {
                    width:8em; height:4em;
                    border:1px dotted #999;
                    background-color:#f3f3f3;
                    font-size:2em;
                    cursor:pointer;
                }
                #example1 .roundabout-in-focus {
                    cursor:auto;
                }
            </style>
            <div class="wrap" id="example1">
                <ul id="myRoundabout">
                   <li>Box 1</li>
                   <li>Box 2</li>
                   <li>Box 3</li>
                   <li>Box 4</li>
                </ul>
            </div>

            <h2>要素の周りを回転</h2>
            <style type="text/css">
                #around {
                    position:relative;
                }
                #around .roundabout-holder {
                    width:32em;
                    height:12em;
                    overflow:hidden;
                    margin:2em auto;
                    position:relative;
                }
                #around .roundabout-moveable-item {
                    width:3em;
                    height:3em;
                    border:1px dashed #888;
                    background-color:#ff0;
                    opacity:0.5;
                    text-align:center;
                    cursor:pointer;
                }
                #around .roundabout-in-focus {
                    cursor:auto;
                }
                .monolith { 
                    background-color:#000;
                    position:absolute;
                    width:17em;
                    top:0; left:7.5em;
                    z-index:200;
                    height:40em;
                }
                .monolith .pad {
                    padding:1em; 
                    text-align:center;
                    color:#999;
                }
            </style>
            <script type="text/javascript">
                $(function() {
                    $('.holder').roundabout({
                        childSelector:'.moveme',
                        easing:'easeInOutBack',
                        duration:1400,
                        maxOpacity:0.7,
                        minOpacity:0.5,
                        tilt:-2
                    });
                });
            </script>
            <div id="around">
                <div class="holder"> 
                    <div class="monolith"> 
                        <div class="pad"> 
                            You must move <em>around</em> me.
                        </div> 
                    </div> 
                    <div class="moveme">OK!</div> 
                    <div class="moveme">OK!</div> 
                    <div class="moveme">OK!</div> 
                    <div class="moveme">OK!</div> 
                    <div class="moveme">OK!</div> 
                </div> 
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

JQuery Sprite Animation Plugin
アニメーションプラグイン

unknown

jquery.js、jQuery.spriteAnimation-0.1.0.js

GIFアニメのようなアニメーションを簡単に作成できるプラグイン。

画像とスプライトオプションを適用することによって、高速で動くスプライトアニメーションを作成することができます。 スプライトオプションには、フレームの幅、開始フレーム、終了フレーム、方向などを指定可能です。 アニメーション回数は、無限あるいはループ数を指定することができます

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jQuery.spriteAnimation-0.1.0.js"></script>
        <script type="text/javascript">
            $(function(){
               $('#sprite1').spriteAnimation({
                        numberOfLoops: -1,
                        direction: 'ltr',
                        startFrame: 0,
                        endFrame: 36,
                        interval: 40
               });
            });
        </script>
        <!-- CSS -->
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <style type="text/css">
            #sprite_box { width:110px; height:110px; background:transparent url("/content/img/ajax/eye.png") no-repeat 0 0; position:relative; }
            #sprite1 { width:85px; height:85px; background:transparent url("/content/img/ajax/eyeball.png") no-repeat 0 0; position:absolute; top:10px; left:15px; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.webinventif.fr/wslide-plugin/'>wSlide, plugin jquery qui va faire glisser vos listes</a></p>
<!-- CODE -->
<div id="sprite_box">
    <div id="sprite1"></div>
</div>
<!-- / CODE -->
        </div>
    </body>
</html>

Kwicks for jQuery
スムーズにアコーディオン

2008/12/1

Kwicks for jQuery

jquery.js v1.2.6、jquery.easing.js v1.1、jquery.kwicks.js v1.5.1

ブロック要素を水平・垂直方向にスムーズにアコーディオンする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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="/content/lib/jquery/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                /* example1 - 水平方向 */
                $('#example1 .kwicks').kwicks({
                    max:250, /* 画像の幅 */
                    spacing:5
                });
                /* example2 - 垂直方向 */
                $('#example2 .kwicks').kwicks({
                    max:200, /* 画像の高さ */
                    spacing :3,
                    isVertical :true
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul,li { margin:0; padding:0; list-style:none; }
            /* defaults for all examples */
            .kwicks {
                list-style:none;
                position:relative;
                margin:0; padding:0;
            }
            .kwicks li{
                display:block;
                overflow:hidden;
                padding:0;
                cursor:pointer;
            }
            /* example1 */
            #example1 .kwicks li {
                float:left;
                width:125px; height:100px;
                margin-right:5px;
            }
            #example1 #kwick1 { background-image:url('/content/img/ajax/p1.png'); }
            #example1 #kwick2 { background-image:url('/content/img/ajax/p2.png'); }
            #example1 #kwick3 { background-image:url('/content/img/ajax/p3.png'); }
            #example1 #kwick4 { background-image:url('/content/img/ajax/p4.png'); margin-right:none; }
            /* example2 */
            #example2 .kwicks li {
                float:left;
                width:125px; height:100px;
            }
            #example2 #kwick1v { background-image:url('/content/img/ajax/p1v.png'); }
            #example2 #kwick2v { background-image:url('/content/img/ajax/p2v.png'); }
            #example2 #kwick3v { background-image:url('/content/img/ajax/p3v.png'); }
            #example2 #kwick4v { background-image:url('/content/img/ajax/p4v.png'); margin-right:none; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.jeremymartin.name/projects.php?project=kwicks'>Kwicks for jQuery</a></p>
<!-- CODE -->

            <h2>例:水平方向</h2>
            <!-- example1 -->
            <div id="example1">
                <ul class="kwicks">
                    <li id="kwick1"></li>
                    <li id="kwick2"></li>
                    <li id="kwick3"></li>
                    <li id="kwick4"></li>
                </ul>
            </div>
            <br clear="all" />
            <!-- example1 / -->

            <h3>例:垂直方向</h2>
            <!-- example2 -->
            <div id="example2">
                <ul class="kwicks">
                    <li id="kwick1v"></li>
                    <li id="kwick2v"></li>
                    <li id="kwick3v"></li>
                    <li id="kwick4v"></li>
                </ul>
            </div>
            <br clear="all" />
            <!-- example2 / -->

<!-- CODE / -->
        </div>
    </body>
</html>

Meerkat
ページ上にアニメーション効果付きで要素をポップアウト

2010/1/6

Meerkat - A jQuery Plugin

jquery.js、jquery.meerkat.js v1.0

ページ上にアニメーション効果付きで要素をポップアウトさせるjQueryプラグイン。 Flashバナーやお知らせなど注目させたい情報を掲載したい時にいいかもです。 疑似エントランスページ風のデモも公開されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.meerkat.1.0.js"></script>
        <script type="text/javascript">
            $(function(){
                /* ページ読み込み時に実行 */
                meerkat({
                    close: '.close',
                    dontShow: '.dont-show',
                    animation: 'slide',
                    animationSpeed: 500,
                    dontShowExpire: 0,
                    removeCookie: '.remove-cookie',
                    meerkatPosition: 'bottom',
                    background: '#000 url(/meerkat/images/meerkat-bg.png) repeat-x 0 0',
                    height: '110px'
                });
                $("#demo1").click(function(){
                    meerkat({
                      close: '.close-meerkat',
                      animation: 'fade',
                      animationSpeed: 750,
                      meerkatPosition: 'top',
                      background: '#000',
                      height: '110px'
                    });
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            #wrap {
                margin-left:20px;
                margin-right:20px;
            }
            #meerkat-container {
                position:relative;
            }
            #meerkat {
                width: 100%;
                display: none;
            }
            #meerkat-content-adsense {
                width:728px;
                margin:0 auto;
                padding-top:10px;
            }
            #meerkat-content-adsense a {
                width:728px; height:90px;
                display:block;
                background:transparent url("/content/img/ajax/banner728x90.jpg") no-repeat 0 0;
                text-indent:-9999px;
            }
            a.close {
                position: absolute;
                top: 7px;
                right: 3px;
                background: url("/content/img/ajax/btn_close.png") no-repeat 0 0;
                display: block;
                height: 26px;
                width: 26px;
                text-indent:-9999px;
            }
            a.close:hover {
                background-position: 0 bottom;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://jarodtaylor.com/meerkat/'>Meerkat - A jQuery Plugin</a></p>
            <ul>
                <li><a href="#" id="demo1">ページ上部にバナー表示(フェード効果)</a></li>
            </ul>
        </div>
<!-- CODE -->
        <div id="meerkat">
            <div id="meerkat-content-adsense">
                <a href="#">banner728x90</a>
            </div>
                <a class="close">Close</a>
        </div>
<!-- CODE / -->
    </body>
</html>

seekAttention
ユーザーに注目させたい要素を点滅させる

2009/3/8

seekAttention v.1 jQuery plugin

FF 2/3、IE 6/7、Opera 9.5、Safari 3 on Windows XP
jquery.js v1.2.6、seekAttention.jquery.js v1.0

強調したい要素以外をフェードアウトして、強調したい要素だけを点滅させる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>設定サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/seekAttention.jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 例1 */
                $("#button1").click(function(){
                    $('#input1').seekAttention();
                });
                $("#button2").click(function(){
                    $('#content2').seekAttention({
                        container:'body'
                    });
                });
                $("#button3").click(function(){
                    $('.important').seekAttention({
                        paddingTop:5,
                        paddingBottom:5,
                        paddingLeft:5,
                        paddingRight:5,
                        opacity:0.7
                    });
                });
                $("#button4").click(function(){
                    $('#para4').seekAttention({
                        /* 点滅なし */
                        pulse:false
                    });
                });
                $("#button5").click(function(){
                    $('#para5').seekAttention({
                        color:$('#select_color').val()
                    });
                });
                $("#button6").click(function(){
                    $('#para6').seekAttention({
                        paddingTop:15,
                        paddingBottom:15,
                        paddingLeft:15,
                        paddingRight:15
                    });
                });
                $("#button7").click(function(){
                    $('#para7').seekAttention({
                        /* ゆっくり点滅 */
                        pulseSpeed:800
                    });
                });
                $("#button8").click(function(){
                    $(this).next().next('img:eq(0)').seekAttention({
                        container: $(this).parent()
                    });
                });
                $("#button9").click(function(){
                    $('h1').seekAttention({
                        paddingTop:15,
                        paddingBottom:15,
                        paddingLeft:15,
                        paddingRight:15
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://enhance.qd-creative.co.uk/demo/seekAttention/'>seekAttention v.1 jQuery plugin</a></p>
<!-- CODE -->
            <h2>例1</h2>
            <p>
                <input id="button1" value="入力フィールドに適用" type="button" />
                <input id="input1" class="text" type="text" />
            </p>

            <h2>例2</h2>
            <div id="content2" style="padding:10px;">
                <p>
                    <input id="button2" value="body要素内のこのボックスに適用" type="button" />
                </p>
            </div>

            <h2>例3</h2>
            <p>
                <input id="button3" value="重要なリンク要素に適用" type="button" />
            </p>
            <blockquote>
                <p>AjaxはAsynchronous (エイシンクロナス、非同期)<a href="http://ja.wikipedia.org/wiki/JavaScript" class="important">JavaScript</a> + XMLの略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrett氏により名付けられた。</p>
                <cite><a href="http://ja.wikipedia.org/wiki/Ajax">Ajax 出典: フリー百科事典『ウィキペディア(Wikipedia)』</a></cite>
            </blockquote>

            <h2>例4</h2>
            <p>
                <input id="button4" value="下記の段落に適用" type="button" />
            </p>
            <p id="para4" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
                サザンテラスのイルミネーションはきれいですねー。17:00~24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
            </p>

            <h2>例5</h2>
            <p>
                <input id="button5" value="下記の段落に適用(色指定)" type="button" />
            </p>
            <p>
                <select id="select_color">
                    <option value="red">red</option>
                    <option value="blue">blue</option>
                    <option value="green">green</option>
                    <option value="orange">orange</option>
                    <option value="purple">purple</option>
                </select>
            </p>
            <p id="para5" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
                サザンテラスのイルミネーションはきれいですねー。17:00~24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
            </p>

            <h2>例6</h2>
            <p>
                <input id="button6" value="下記の段落に適用(余白指定)" type="button" />
            </p>
            <p id="para6" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
                サザンテラスのイルミネーションはきれいですねー。17:00~24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
            </p>

            <h2>例7</h2>
            <p>
                <input id="button7" value="下記の段落に適用(点滅速度指定)" type="button" />
            </p>
            <p id="para7" style="width:500px;min-height:75px;height:auto!important;height:75px;background:transparent url(http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_t.jpg) no-repeat 10px 10px; padding:15px 10px 10px 120px;">
                サザンテラスのイルミネーションはきれいですねー。17:00~24:00まで点灯タイムだそうです。「ブリリアント・ブレス・テラス」というのがテーマだそうです。木々がブルーライトでドレスアップされていて、とっても幻想的です★
            </p>

            <h2>例8</h2>
            <div style="padding:10px;">
                <input id="button8" value="このボックス内の画像に適用" type="button" /><br>
                <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" />
            </div>


            <h2>例9</h2>
            <p>
                <input id="button9" value="このページのH1要素に適用" type="button" />
            </p>
<!-- / CODE -->
        </div>
    </body>
</html>

Wilq32.RotateImage
画像を指定した角度に回転して表示

2009/3/14

Wilq32.RotateImage

IE未対応
jquery.js、jQueryRotate.js

JavaScriptとHTML5のcanvas要素を使用して、画像を回転して表示する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>設定サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jQueryRotate.js"></script>
        <script type="text/javascript">
            $(function(){
                /* 画像を指定した角度に回転 */
                $('#image').rotate(-25);
                /* 画像の角度を指定 */
                $('#image2').rotate({angle:5});    
                /* 回転アニメーション */
                var rot=$('#image3').rotate(
                    {
                        maxAngle:25,minAngle:-55,
                        bind:[
                            {"mouseover":function(){rot.rotateAnimation(85);}},
                            {"mouseout":function(){rot.rotateAnimation(-35);}}
                        ]
                    }
                );
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://wilq32.googlepages.com/wilq32.rollimage222'>jQuery plugin: Wilq32.RotateImage</a></p>
<!-- CODE -->
            <h2>jQuery(imgElement).rotate(parameters)</h2>
            <p>画像を指定した角度に回転</p>
            <p><img id="image" src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" width="240" height="180" alt="Starbucks Coffee" /></p>

            <h2>jQuery(imgElement).rotate(angleValue)</h2>
            <p>画像の角度を指定</p>
            <p><img id="image2" src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" width="240" height="180" alt="Starbucks Coffee" /></p>

            <h2>jQuery(imgElement).rotateAnimation(parameters)</h2>
            <p>回転アニメーション(画像にマウスオーバーすると画像が回転)</p>
            <p><img id="image3" src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" width="240" height="180" alt="Starbucks Coffee" /></p>
<!-- CODE / -->
        </div>
    </body>
</html>

wSlide
ブロック要素をエフェクト効果付きでスムーズにスライド

2008/11/15

wSlide, plugin jquery qui va faire glisser vos listes

jquery.js v1.2.6、jquery.easing.js v1.3、jquery.wslide.js

ブロック要素を横方向や斜め方向にスムーズにスライドするjQueryプラグイン。 シンプルなスライドから、アニメーション効果付きや、CSSを使ったパノラマ風のスライドショーなどいろいろなサンプルが掲載されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="/content/lib/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="/content/lib/jquery/jquery.wslide.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                /*  Exemple 1 */
                $("#parent1").wslide({
                    width: 450,
                    height: 250,
                    duration: 2000,
                    effect: 'easeOutBounce'
                });
                /*  Exemple 2 */
                $("#parent2").wslide({
                    width:210,
                    height:270,
                    pos: 4,
                    horiz: true,
                    duration: 4000,
                    effect: 'easeOutElastic'
                });
                /*  Exemple 3 */
                $("#parent3").wslide({
                    width: 240,
                    height: 300,
                    col: 4,
                    autolink: 'menu3',
                    duration: 4000,
                    effect: 'easeOutExpo'
                });
            });
        </script>
        <!-- CSS -->
        <style type="text/css">
            ul,li { margin:0; padding:0; list-style:none; }
            #parent1 li { background:#000; padding:5px; color:#fff; }
            #parent1 li a { display:block; width:75px; height:100px; float:left; }
            #parent1 li p { margin:0; padding:0; float:right; width:250px; }
            #parent1-menu a.wactive { padding:0px 2px; background:#000; color:#eee; }
            #parent2-wrap { border:1px solid gray; background:#000; }
            #parent2 li { background:#000; padding:15px; margin:5px; }
            #parent2-menu a.wactive { font-weight:bold; }
            #parent3 li { background:red url("http://farm4.static.flickr.com/3025/3025576014_a0618b7ddd_o.jpg") repeat 0 0;padding:10px; color:#fff; }
            #menu3 a.wactive { padding:0 3px; border:1px solid gray; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>【参照】<a href='http://www.webinventif.fr/wslide-plugin/'>wSlide, plugin jquery qui va faire glisser vos listes</a></p>
<!-- CODE -->
            <h2>例1</h2>
            <ul id="parent1">
                <li><div class="cf"><a href="http://www.flickr.com/photos/22559849@N06/3025576014/" title="カレー@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3025/3025576014_4556a96da4_m.jpg" width="180" height="240" alt="カレー@Rose de Sahara" /></a><p>閉店してしまったけど、新宿南口にあったアフリカ料理店「ローズ・ド・サハラ」。</p></div></li>
                <li><div class="cf"><a href="http://www.flickr.com/photos/22559849@N06/3024747513/" title="カレー@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3250/3024747513_52f67bab02_m.jpg" width="180" height="240" alt="カレー@Rose de Sahara" /></a<p>メニュー名は忘れたけれど、マイルドでこくのあるカレーです。ピタみたいな硬い円形のパンをちぎってカレーに付けて食べます。結構日本のカレーに近い感じ!</p></div></li>
                <li><div class="cf"><a href="http://www.flickr.com/photos/22559849@N06/3025576118/" title="ダチョウの卵の殻に入ったカクテル@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3025576118_bc3519c201_m.jpg" width="180" height="240" alt="ダチョウの卵の殻に入ったカクテル@Rose de Sahara" /></a><p>ダチョウの卵の殻に入ったカクテルはとってもインパクト大!!しかも花火付きw</p></div></li>
                <li><div class="cf"><a href="http://www.flickr.com/photos/22559849@N06/3024747537/" title="ワニのから揚げ@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3235/3024747537_6d5486c8c8_m.jpg" width="180" height="240" alt="ワニのから揚げ@Rose de Sahara" /></a><p>ワニ、カンガルーといった日本では珍しい肉料理が食べれました。ワニのから揚げは、アメリカンドッグの味がしました。なんせワニ肉が小さすぎて衣の味しかしなかったのが正直なところw</p></div></li>
                <li><div class="cf"><a href="http://www.flickr.com/photos/22559849@N06/3024747493/" title="ジャンバラヤ@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3180/3024747493_1be580f92f_m.jpg" width="180" height="240" alt="ジャンバラヤ@Rose de Sahara" /></a><p>ジャンバラヤだったと思う。詳しくは忘れちゃったけど、しっとりめのトマトシチューチャーハンみたいな感じの味でした!</p></div></li>
            </ul>

            <h2>例2</h2>
            <ul id="parent2">
                <li><a href="http://www.flickr.com/photos/22559849@N06/3025576118/" title="ダチョウの卵の殻に入ったカクテル@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3025576118_bc3519c201_m.jpg" width="180" height="240" alt="ダチョウの卵の殻に入ったカクテル@Rose de Sahara" /></a></li>
                <li><a href="http://www.flickr.com/photos/22559849@N06/3024747537/" title="ワニのから揚げ@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3235/3024747537_6d5486c8c8_m.jpg" width="180" height="240" alt="ワニのから揚げ@Rose de Sahara" /></a></li>
                <li><a href="http://www.flickr.com/photos/22559849@N06/3024747513/" title="カレー@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3250/3024747513_52f67bab02_m.jpg" width="180" height="240" alt="カレー@Rose de Sahara" /></a></li>
                <li><a href="http://www.flickr.com/photos/22559849@N06/3024747493/" title="ジャンバラヤ@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3180/3024747493_1be580f92f_m.jpg" width="180" height="240" alt="ジャンバラヤ@Rose de Sahara" /></a></li>
                <li><a href="http://www.flickr.com/photos/22559849@N06/3025576014/" title="カレー@Rose de Sahara by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3025/3025576014_4556a96da4_m.jpg" width="180" height="240" alt="カレー@Rose de Sahara" /></a></li>
            </ul>

            <h2>例3</h2>
            <div id="menu3"></div>
            <ul id="parent3">
                <li>閉店してしまったけど、新宿南口にあったアフリカ料理店「ローズ・ド・サハラ」。</li>
                <li>ダチョウの卵の殻に入ったカクテルはとってもインパクト大!!しかも花火付きw</li>
                <li>ワニ、カンガルーといった日本では珍しい肉料理が食べれました。ワニのから揚げは、アメリカンドッグの味がしました。なんせワニ肉が小さすぎて衣の味しかしなかったのが正直なところw</li>
                <li>メニュー名は忘れたけれど、マイルドでこくのあるカレーです。ピタみたいな硬い円形のパンをちぎってカレーに付けて食べます。結構日本のカレーに近い感じ!</li>
                <li>ジャンバラヤだったと思う。詳しくは忘れちゃったけど、しっとりめのトマトシチューチャーハンみたいな感じの味でした!</li>
            </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery illuminate
要素にグロー効果を付けて光らせる(jQuery UI使用)

2011/6/19

jQuery illuminate

jquery.js、jquery.ui.js、jquery.illuminate.0.7.js

指定した要素にグロー効果を付けて光らせてくれるjQueryプラグイン。 対象要素に指定した背景色でグローがかかります。

オプションで、グロー効果の透明度、外側のグローの色・サイズ、速度などをカスタマイズできます。 要素の背景色と異なる色で光らせたい場合は、outerGlowColorパラメータにRRGGBB形式で任意の色を指定すればOK。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!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>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.illuminate.0.7.js" ></script>
        <script type="text/javascript">
            $(function(){
                $('#email').illuminate({'outerGlowSize': '10px'});
                $('#btn_login').illuminate({'outerGlowSize': '10px',"outerGlowColor":"#ffffff"});

                var defaultvalue="メールアドレス";
                $("#email").bind("click",function(){
                    if($(this).val()==defaultvalue){
                        $(this).val("");
                    }else{
                    }
                }).bind("blur",function(){
                    if($(this).val()==""){
                        $(this).val(defaultvalue);
                    }
                });
            });
        </script>
        <!-- CSS -->
        <link href="/content/lib/jquery/galleria.css" rel="stylesheet" type="text/css">
        <style media="screen,projection" type="text/css">
            #demo {
                background:#333;
                padding:20px;
                color:#fff;
                width:400px;
            }
            input,span { -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; }
            input#email { padding:5px; border:1px solid #ccc!important; }
            input#btn_login { padding:5px 10px; border:0; background:darkorange; color:#fff; font-weight:bold;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>参照:<a href='http://www.tonylea.com/2011/jquery-illuminate/'>jQuery illuminate</a></p>
            <p>input要素をグロー表示。</p>
<!-- CODE -->
<div id="demo">
    <form>
        <label for="email">RSSをメール送信: <input id="email" name="email" type="text" value="メールアドレス" /></label>
        <input id="btn_login" name="btn_login" type="button" value="登録" />
    </form>
</div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women