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

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

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

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

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

sblog20160913a

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

パララックスとは?

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

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

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

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

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

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

探検!京都大学

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

最近は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>

一番上にheaderタグのブロックがあり、以下sectionタグのブロックが4つ並んでいます。

このsectionタグブロックの右にスマフォ画像を配置し、CSSの「background-attachment:fixed」で親要素に対して固定表示させています。

background-attachmentとは、画面をスクロールする際に、背景画像をその位置に固定するか、スクロール移動するかの指定です。
「background-attachment:fixed」だと固定になります。

では、試しに「background-attachment:fixed」を解除してみましょう。
すると以下のような画面表示となります。

sblog20160913b

各sectionブロックごとにずらずらとスマフォが並んでますね。
こいつをbackground-attachmentで固定してスクロールすると、あたかもスマフォの外側のみが固定され、中身が変化していくように見えるわけです。

これ考えた人は凄いですね。

オープンソース素材で提供

このパララックスは、オープンソース素材となっていて、誰でも使えます。

CSS Fixed Background Effect | CodyHouse

気に入った人は是非使ってみてください。

この授業は一年以上前の録画なのですが、WEB制作でのパララックスによる表現は衰えることを知らず、今ではむしろ当たり前の手法となってきました。

これを器用に使いこなせるようになりたいです。
頑張って勉強しないとな~。

関連記事

WEBサイト & 画像を制作します

WEBサイト & 画像を制作します

お見積もり・ご注文はクラウドソーシングのランサーズ経由で承っております。
ランサーズの無料アカウントを取得されておいてください。