レスポンシブ対応なハニカム上のパネルを並べられるライブラリhoneycombs.js
ハニカム上にdivを並べられてマウスオーバーでオモテウラを切り替えられるライブラリです。
使い方(READMEより)
<script src="honeycombs/js/jquery.honeycombs.js"></script> <link rel="stylesheet" type="text/css" href="honeycombs/css/honeycombs.css" /> <div class="honeycombs"> <div class="comb"> <div class="front-content"> <p>I am a front title</p> </div> <div class="back-content"> <p>I am a back title</p> </div> </div> <div class="comb"> <div class="front-content"> <p>I am a front title</p> </div> <div class="back-content"> <p>I am a back title</p> </div> </div> </div> <script> $(document).ready(function() { $('.honeycombs').honeycombs({ combWidth:250, // width of the hexagon margin: 0, // spacing between hexagon threshold: 3 // hide placeholder hexagons when number of hexagons in a row is more than the threshold number }); }); </script>
レスポンシブ対応もしていて、画面幅に応じて適切なハニカム構造になってくれます。
実際使ってみた感じ。
パネルの色を変えるにはこの辺りを設定します。
#favorite .comb .icon-hex-lg{ color: #3498DB; } .comb:hover > span { color: #F1C40F !important; }