fnwiya's quine

自分自身を出力するブログ

レスポンシブ対応なハニカム上のパネルを並べられるライブラリhoneycombs.js

ハニカム上にdivを並べられてマウスオーバーでオモテウラを切り替えられるライブラリです。

github.com

使い方(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>

レスポンシブ対応もしていて、画面幅に応じて適切なハニカム構造になってくれます。

実際使ってみた感じ。 f:id:fnwiya:20151214212336p:plain

パネルの色を変えるにはこの辺りを設定します。

#favorite .comb .icon-hex-lg{
    color: #3498DB;
}

.comb:hover > span {
    color: #F1C40F !important;
}