印象的にサムネイルを魅せられるjQueryチュートリアル via Scrollable Thumbs Menu with jQuery

まずは見ていただいた方がいいかもしれません。(サンプル
このような印象的なサムネイルの魅せ方をJavaScriptライブラリjQueryで実現しています。
上記のようなアパレルだけでなく、ブランド志向の商品・サービスに使えそうです。
via:Scrollable Thumbs Menu with jQuery | Codrops

sponsors

使用方法

まずhtmlのマークアップです。

<ul class="menu" id="menu">
	<li>
		<a href="#">Brand 1</a>
		<div class="sc_menu_wrapper">
			<div class="sc_menu">
				<a href=""><img src="images/1.jpg" alt=""/></a>
				<a href=""><img src="images/2.jpg" alt=""/></a>
				...
			</div>
		</div>
	</li>
	<!-- 以下メニュー分 -->
</ul>
次にCSSです。

body{overflow:hidden;}
/* ベースメニューの指定
 ページを下部にスクロール可能にしたい場合メニューをbottomにくっつけます */
ul.menu{
    list-style:none;
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position: fixed;
    bottom:0px;
    left:0px;
    width:700px;
    height:100%;
}
ul.menu li{
    float:left;
    position:relative;
    height:100%;
    width:130px;
}
ul.menu li > a{
    position:absolute;
    bottom:0px;
    left:0px;
    width:130px;
    height:40px;
    text-align:center;
    line-height:40px;
    color:#ddd;
    background-color:#291A2F;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:-1px 0px 5px #000;
    -webkit-box-shadow:-1px 0px 5px #000;
    box-shadow:-1px 0px 5px #000;
    opacity:0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

/* サムネイルのスタイル指定です */
div.sc_menu_wrapper {
    position: absolute;
    top:0px;
    width:150px;
    overflow: hidden;
    bottom:0px;
    left:0px;
    visibility:hidden;
}
div.sc_menu {
    width:130px;
    visibility:hidden;
}

.sc_menu a {
    display: block;
    background-color:#22002F;
    color: #fff;
    text-align:center;
    -moz-box-shadow:3px -3px 3px #3B0F4F;
    box-shadow:3px -3px 3px #3B0F4F;
    -webkit-box-shadow:3px -3px 3px #3B0F4F;
}
.sc_menu img {
    display: block;
    border: none;
    opacity:0.3;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
最後にJavaScriptを記述していきます。

        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(function(){
                /* サムネイルをスクローラブルにします */
                function buildThumbs($elem){
                    var $wrapper    	= $elem.next();
                    var $menu 		= $wrapper.find('.sc_menu');
                    var inactiveMargin 	= 150;
                    /* スクロールダウンの高さを取得 */
                    $wrapper.scrollTop($menu.outerHeight());
                    /* マウスの動作によりサムネイルを動かします */
                    $wrapper.bind('mousemove',function(e){
                        var wrapperHeight 	= $wrapper.height();
                        var menuHeight 	= $menu.outerHeight() + 2 * inactiveMargin;
                        var top 	= (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
                        $wrapper.scrollTop(top+10);
                    });
                }
                
                var stacktime;
				
                $('#menu li > a').bind('mouseover',function () {
                    var $this = $(this);
					
                    buildThumbs($this);
					
                    var pos	=	$this.next().find('a').size();
                    var f	=	function(){
                        if(pos==0) clearTimeout(stacktime);
                        $this.next().find('a:nth-child('+pos+')').css('visibility','visible');
                        --pos;
                    };
                    /* サムネイル表示タイミングをずらします */
                    stacktime = setInterval(f , 50);
                });
                
                /* liタグ内からマウスアウトしたら隠します */
                $('#menu li').bind('mouseleave',function () {
                    var $this = $(this);
                    clearTimeout(stacktime);
                    $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
                    $this.find('.sc_menu_wrapper').css('visibility','hidden');
                });
                
                /* サムネイルにマウスオーバーしたらopacityを変更 */
                $('.sc_menu a').hover(
                function () {
                    var $this = $(this);
                    $this.find('img')
                    .stop()
                    .animate({'opacity':'1.0'},400);
                },
                function () {
                    var $this = $(this);
                    $this.find('img')
                    .stop()
                    .animate({'opacity':'0.3'},400);
                }
            );
            });
        </script>
これだけで、印象的に魅せられるので、ぜひ上記を参考に応用してみてください。

サンプル

サンプル

sponsors


Javascriptサンプルページ一覧
skuare.net