マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」

マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」サンプル
マウスオーバー時にエフェクトを付けたいなどの希望があるかと思います。
jQueryプラグインのjQuery Flip Out Cardsを利用すると、当該要素にマウスオーバーすると隠していた要素をふわっと、わさっと表示してくれます。

使用方法 jQuery Flip Out Cardsからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="flipout_cards.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipout_cards.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".flipout").flipout_cards();
});
</script>

次に要素を下記のようなHTMLで記述します。
<div class="page-container">
<div class="flipout">
<div class="foc-main">
最初に表示しているメインの要素
</div>
<div class="foc-top">
マウスオーバー時に上に出したい要素
</div>
<div class="foc-left">
マウスオーバー時に左に出したい要素
</div>
</div>
</div>

上記のように「foc-位置」で出したい場所を決められます。
foc-bottom,foc-rightのような感じです。
また右に3個ということも可能で、上から記述した順に出現します。
最後にCSSで見た目を調整します。
サンプルは下記のようにしています。 .page-container { float: left; width: 100%; margin: 200px auto 200px; position: relative; } .foc-main { display: inline-block; box-shadow: 0 1px 5px rgba(0,0,0,0.15); } .foc-card { background: #f8f8f8; border-left: 1px solid #eee; } .flipout { text-align: center; } .foc-main p{ margin: 0; color: #77BEFF; font-size: 100px; font-weight: 100; } .foc-card p{ color: #CCC; margin-top: 25px; margin-bottom: 25px; font-size: 50px; font-weight: 100; }
マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」サンプル

sponsors

「マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」」をシェアする

記事作成:
記事URL:

TOP > > > マウスオーバーで隠れている要素をふわっと心地よく表示させるJavaScript「flipout_cards」