2018.01.04schoo授業感想「CSSでパララックスを実装する:動くデザイン制作」ツイートシェアはてブ送るPocketオンライン動画学習サービスの「schoo(スクー)」。授業の受講感想記です。Webデザインの全行程https://schoo.jp/class/2119全8回シリーズの7回目、田中先生の録画授業です。動くデザイン、パララックスについての授業です。パララックスとは?そもそもパララックスとはなんぞや?WEB制作業界は横文字が氾濫していて、部外者には何が何だか分からない用語だと思います。パララックス、日本語で言うと「視差効果」です。こちらのサイトではこう定義しています。Webデザインにおけるパララックスは、スクロールなどの動作に応じて、複数のレイヤー(層)にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。分かったような分からないような説明ですが、実際に現物を見たほうが早いと思います。笑顔咲かせるライフスタイル情報マガジン*探検!京都大学スクロールすると画像やイラストがふわっと浮き上がってきたり出現したり、背景画像とのスクロール速度が違ったりで、立体感&動きのあるデザインになってます。こいつが「パララックス」です。最近はWEBサイトだけではなく、アプリにもこういう動きのある表現が多いです。CSSを使ったパララックスパララックスはJavaScriptで動作させることが多いのですが、この授業ではCSSでの実装例を紹介しています。下記デモサイトをパソコンでご覧ください。Effectスクロールすると、画面右側のスマフォが固定表示され、さらにスマフォの画面の中がスクロールに応じて変化していきます。これをJavaScript無しにCSSのみで実装しています。スクロールに応じた変化がとても不思議な感じですが、実は人間の目の錯覚を利用した表現手法です。background-attachment:fixedソースコードを見てみましょう。</div></section>一番上にheaderタグのブロックがあり、以下sectionタグのブロックが4つ並んでいます。このsectionタグブロックの右にスマフォ画像を配置し、CSSの「background-attachment:fixed」で親要素に対して固定表示させています。background-attachmentとは、画面をスクロールする際に、背景画像をその位置に固定するか、スクロール移動するかの指定です。「background-attachment:fixed」だと固定になります。試しに「background-attachment:fixed」を解除してみましょう。すると以下のような画面表示となります。各sectionブロックごとにずらずらとスマフォが並んでますね。こいつをbackground-attachmentで固定してスクロールすると、あたかもスマフォの外側のみが固定され、中身が変化していくように見えるわけです。これ考えた人は凄いですね。オープンソース素材で提供このパララックスは、オープンソース素材となっていて、誰でも使えます。CodyHouse気に入った人は是非使ってみてください。この授業は一年以上前の録画なのですが、WEB制作でのパララックスによる表現は衰えることを知らず、今ではむしろ当たり前の手法となってきました。これを器用に使いこなせるようになりたいです。頑張って勉強しないとな~。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。