schoo授業感想「CSSでパララックスを実装する：動くデザイン制作」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
＊Webデザイン入門動くデザイン制作編 | Webデザインの全行程
https://schoo.jp/class/2119

全8回シリーズの7回目、田中先生の録画授業です。

動くデザイン、パララックスについての授業です。

パララックスとは？

そもそもパララックスとはなんぞや？

WEB制作業界は横文字が氾濫していて、部外者には何が何だか分からない用語だと思います。
パララックス、日本語で言うと「視差効果」です。

こちらのサイトではこう定義しています。

Webデザインにおけるパララックスは、スクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。

分かったような分からないような説明ですが、実際に現物を見たほうが早いと思います。

以下、パララックスを使った有名サイト例

＊84デザイン室

＊WEB SMILE 笑顔咲かせるライフスタイル情報マガジン

＊探検！京都大学

スクロールすると画像やイラストがふわっと浮き上がってきたり出現したり、背景画像とのスクロール速度が違ったりで、立体感＆動きのあるデザインになってます。
こいつが「パララックス」です。

最近はWEBサイトだけではなく、アプリにもこういう動きのある表現が多いです。

CSSを使ったパララックス

パララックスはJavaScriptで動作させることが多いのですが、この授業ではCSSでの実装例を紹介しています。

まずは下記デモサイトをパソコンでご覧ください。
（このサイトの場合、タブレット・スマフォだとパララックスは機能してません）

＊DEMO | Fixed Background Effect

スクロールすると、画面右側のスマフォが固定表示され、さらにスマフォの画面の中がスクロールに応じて変化していきます。

これをJavaScript無しにCSSのみで実装しています。

スクロールに応じた変化がとても不思議な感じですが、実は人間の目の錯覚を利用した表現手法です。

background-attachment:fixed

ソースコードを見てみましょう。

<header class="cd-header" data-type="slider-item">
    <h1>Fixed Background Effect</h1>
</header>

<section class="cd-fixed-background img-1" data-type="slider-item">
    <div class="cd-content">
        <h2>Title here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
    </div>
</section>

<section class="cd-fixed-background img-2" data-type="slider-item">
    <div class="cd-content light-background">
        <h2>Title here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
    </div>
</section>

<section class="cd-fixed-background img-3" data-type="slider-item">
    <div class="cd-content">
        <h2>Title here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
    </div>
</section>

<section class="cd-fixed-background img-4" data-type="slider-item">
    <div class="cd-content">
        <h2>Title here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
    </div>
</section>