component-flip

flip

全面背景とボックスを持つ、フリップボードのようなコンポーネントを表示する。
必ず .flip-(type) クラスを付与する必要があり、(breakpoint)が lg 以上でタイプによりデザインが変化する。
vhが非対応のブラウザがまだ多いため、高さは固定値としている。 背景が暗色であることが前提となっているので、適当調整すること。

flip-01

背景画像がコンテナ幅の半分を埋める。

(contents)
<div class="flip flip-01">
    <div class="flip-container">
        <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_06.jpg)"></div>
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>

flip-02

コンテンツ高さが内容に応じて可変となる。

(contents)
<div class="flip flip-02">
    <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_09.jpg)"></div>
    <div class="flip-container">
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>

flip-03

コンテンツ高さは常に一定の上下余白を引いた値となる。

(contents)
<div class="flip flip-03">
    <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_10.jpg)"></div>
    <div class="flip-container">
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>

flip-r

コンテンツの位置が逆となる。

(contents)
(contents)
(contents)
<div class="flip flip-01 flip-r">
    <div class="flip-container">
        <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_03.jpg)"></div>
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>

<div class="flip flip-02 flip-r">
    <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_04.jpg)"></div>
    <div class="flip-container">
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>

<div class="flip flip-03 flip-r">
    <div class="flip-cover" style="background-image: url(/themes/zeroichi_lp/images/_dummy/image_05.jpg)"></div>
    <div class="flip-container">
        <div class="flip-contents">
            <div class="flip-contents-inner">
                <div class="bg-third bg-fade p-sm line-c">(contents)</div>
            </div>
        </div>
    </div>
</div>