2018.01.04schoo授業感想「CSSとjQueryによるパララックスの実装:基本3パターン」ツイートシェアはてブ送るPocketオンライン動画学習サービスの「schoo(スクー)」。授業の受講感想記です。『デザインパターン基礎:動作に合わせてデザインを変化させるパララックス(視差効果)の実装』https://schoo.jp/class/3397連続8回授業の6回目。関連記事schoo授業感想「CSSでパララックスを実装する:動くデザイン制作」2018.01.04今回はCSSとjQueryの両方を使ったパターンです。背景画像の固定この授業では、パララックスの基本的なパターンを3つ解説しています。これは最近多くなりましたね。CSSのみを用いたパララックスです。以下のCSSのコードを、背景画像をはめこむブロックに適用します。center」にて表示領域が変更になっても、画像の中心部が常に表示されます。cover」にて◇画像の幅と高さの比率が固定されます。◇背景の表示領域を覆うように表示されます。上から何かが降ってくるパララックス次に、ページをスクロールすると上から雪が降ってくるパララックス。CSSとjQueryの合わせ技です。授業の解説では、雪の個数を10個にして、個々の雪の大きさや下降速度に差異を設けていました。このコードはややこしいので、興味のある方は実際に動画を見て確認してください。jQueryでページスクロールの値を取得して、それに応じて雪がハラリと降ってきます。浮き上がるパララックス最後に、パララックスで一番使われているパターン。スクロールすると、画像やアイテムなどがフワッと表示される例のアレです。jQueryのみで動きを実現しています。これは実際にサイトに実装してみました。以下のサンプルサイトです。ご紹介」、この2つのブロックにパララックスを施しています。コードは、bodyの閉じタグの直前に以下のように記述しています。});</script>まず、一番上がjQueryのCDN。その下がパララックスのコードです。細かい解説は動画を見ていただくとして、中の「>800」「>1500」などの表記は、「800pxスクロールしたらパララックスを発動させよ!」という指示です。あと「.fadeIn(2000)」の箇所の数値は、フワッと表示する際の表示速度です。値が大きいほどゆっくり表示されます。実装してみての不満点としては、スマホ表示で見るとフワッのタイミングが合ってないですね。ここが今後の課題かなあ。今回の授業で解説した3つは、パララックスでは基本的なパターンで、いろいろと応用することで様々な動きが実現可能とのこと。パララックス、昨今のWEB制作では当たり前のように使われてますね。本気でおぼえないと取り残されそうな感じです。WEBデザインの世界は変化が激しくて追いつくのが大変ですなあ。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。