
「Cool Carousels」でつくる、画像をマウスオーバーした時にスライドさせてテキストを表示する
2014年12月2日jQueryプラグイン活用
jQueryプラグイン「Cool Carousels」を使って、画像をマウスオーバーした時にスライドしてくるアニメーションでテキストを表示する仕組みをつくることができます。
JavaScript
(function($){ $(function() { $('#photo > figure').each(function() { var $cfs = $(this); $cfs.carouFredSel({ direction: 'up', circular: false, infinite: false, auto: false, scroll: { easing: 'quadratic', queue: 'last' }, items: { visible: 1, width: 237, height: 156 } }); $cfs.hover( function() { $cfs.trigger('next'); }, function() { $cfs.trigger('prev'); } ); }); }); })(jQuery);
HTML
<div id="photo"> <figure> <img src="img01.jpg" width="237" height="156" /> <figcaption>photo01</figcaption> </figure> <figure> <img src="img02.jpg" width="237" height="156" /> <figcaption>photo02</figcaption> </figure> <figure> <img src="img03.jpg" width="237" height="156" /> <figcaption>photo03</figcaption> </figure> </div>
CSS
.caroufredsel_wrapper { margin: 0 !important; } #photo { margin: 0 auto; width: 711px; } #photo figure { display: block; width: 237px; height: 156px; float: left; } #photo figure figcaption { display: block; background-color: #ffbc30; width: 237px; height: 156px; color: #ffffff; padding: 15px 20px; box-sizing: border-box; }