CSSだけで全画面の画像を真っ二つにぶった切る方法です。真っ二つにした上で、観音開きにしたり、スライドさせたりといったアニメーションを加えています。

アニメーションや画像の開閉についても、全てCSSだけでやっています。

全画面の画像を真っ二つに開くデモ

まずは以下のデモをご覧ください。

CSSで全画面の画像を真っ二つに開くデモ

slide、fade、push、pullというテキストの部分をクリックすると、それぞれアニメーションしながら開閉します。

ちなみに、クリックでの開閉にはJSを使わず、前回のエントリーで紹介した、チェックボックスを使ったテクニックを応用しています。

やり方

だいたい想像がつくと思いますけど、難しいことはやっていなくて、画像を2枚用意して、それぞれclip要素で左右を半分ずつ切り抜いてつなぎ合わせているだけです。画像は、CSSで疑似要素(beforeとafter)に対して背景として設定しています。

clip要素のrect()で、数値に単位をつけて切り抜く位置を指定する訳ですが、単位にパーセント(%)が使用できないため、少しはまったんですが、vhとvwを使用することで解決しました。

HTML

<input type="checkbox" class="check slide" id="checked-slide">
<label class="switch slide" for="checked-slide"></label>
<div class="gatefold">
    <!-- この部分の要素が画像の下に隠れる -->
</div>

input要素とlabel要素は、開閉時のアニメーションを指定する為に使用しています。デモでは開閉時のアニメーションが複数あるので、その分のinputとlabel要素が用意されています。

疑似要素に画像を指定しているので、1つのdiv要素さえあればよく、HTMLは非常にシンプルです。

CSS

.gatefold {
    width: 100%;
    height: 100%;
}

/* 左の画像 */
.gatefold::before {
    left: 0;
    clip: rect(0px 50vw 100vh 0px);
}

/* 右の画像 */
.gatefold::after {
    right: 0;
    clip: rect(0px 100vw 100vh 50vw);
}

/* 共通 */
.gatefold::before,
.gatefold::after {
    content: '';
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/gatefold.jpg) top center no-repeat;
    background-size: cover;
    -webkit-transition: all 1s;
    transition: all 1s;
    z-index: 1;
}

疑似要素にそれぞれ背景画像として画像を設定しています。:before疑似要素が左の画像、:after疑似要素が右の画像です。

rect()の数値は、画像が全画面の場合のものなので、画像によって調整が必要になります。どのような画面サイズでも合うようにはなっていますが、極端に画面サイズが小さい場合(スマホとか)での使用は控えたほうがいいかもしれません。また、画面サイズによっては、コンテンツ部分が見づらい場合があります。

アニメーションの部分は記載していませんが、デモの画像下やcodepenに全てのコードを掲載していますので、そちらを参考にして頂ければと思います。

ブラウザ

ChromeやSafari、Firefoxのそれぞれ最新版では問題なく表示でき、IE11でも問題はありませんでした。古いIEは無理ですね。また、スマホだと大きさ的にきつい感じです。

使いどころ

面白そうだなぁと思ってやってみたものの、使いどころが全く思いつかないんですよね。普通のサイトではアクセシビリティ的によくないでしょうし、かなりインパクトを重視したサイトじゃないと使えないのかなぁと。クリックじゃなくマウスホバーだったらまだいいかもしれませんね。

良かったら使ってみてください。