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

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

使用方法
まず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>

これだけで、印象的に魅せられるので、ぜひ上記を参考に応用してみてください。

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

sponsors

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

記事作成:
記事URL:

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