Web制作
CSSを使って、窓ガラスから、前の通りをのぞいたような効果を実装してみる

CSSを使って、窓ガラスから、前の通りをのぞいたような効果を実装してみる

2024.01.08

最近、CSSでオブジェクトを反転できることを知り、どんな風になるか確認してみました。その確認のため作成したサンプルがこちらで、「窓ガラスから、前の通りをのぞいたような効果」を目指しています。

窓ガラスから、前の通りをのぞいたような効果のサンプル

ただ、これには一応元ネタがあって、数年前見かけた、カロリーメイトからの視点で作られたCMをお手本にしています。

『カロリーメイト』受験生応援シリーズ新CM 変化した受験生たちのリアルな姿を描く – ORICON NEWS

scale()を使って、オブジェクトを反転

で、反転させるCSSですが、scale()の引数に、マイナスの値を設定することで反転します。
今回は、テキストを反転させていますが、多分画像なども大丈夫だと思います。

<style>
// かっこ内の二つの引数は、X軸方向とY軸方向を設定します。
// 今回は、X軸方向のみ、中央を基準にして反転させています。
.copy {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    transform: scale(-1, 1);
}
</style>
<div class="copy">
    <h1>
        open    mon - fri
        <br>
        10:00 - 18:00
        <br>
        close    sat sun
    </h1>
</div>

blur()を使って、手前をぼかす

あと、遠近感を出すため、奥の写真に焦点を合わせるようにしています。手前にあたる文字は、blur()を使ってぼかしています。この手のぼかしは、以前はtext-shadow()だったと思いますが、blur()の方が使いやすく、見た目もいいですね。

<style>
.copy {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    transform: scale(-1, 1);
}
h1 {
    filter: blur(2px);
    font-family: 'Bree Serif', serif;
    font-size: min(8vw, 120px);
    line-height: 1;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
}
</style>
<div class="copy">
    <h1>
        open    mon - fri
        <br>
        10:00 - 18:00
        <br>
        close    sat sun
    </h1>
</div>