chevron_left デザインパターン基礎

デザインパターン基礎

PREMIUM
第6回

デザインパターン基礎 -動作に合わせてデザインを変化させるパララックス(視差効果)の実装-

2016年9月12日 60min

会員登録して、全てのスライドを見よう

1 / 14

授業の概要

この授業では、Web制作におけるPCサイト及びスマートフォン(スマホ)サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第6回目の授業は、Webサイトデザインの定番となりつつある、ページスクロールなどの動作に合わせてデザインを変化させるパララックスの実装を学んでいきます。

近年クリエイティブが単純化した影響で、Webサイトは動きでデザインを表現する機会がとても多くなってきました。そんな時によく用いられるようになったのがパララックスです。パララックスとは“視差効果”を用いたデザイン手法の一つになります。

いくつかパターンのあるパララックス表現ですが、今回は主要なものだけ抜粋して学習していきましょう。

こんな人にオススメ

実践的に使えるデザインパターンを学びたいWebデザイナー

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
授業の流れ
01:19
play_arrow
パララックス全体の説明
00:55
play_arrow
質問:パララックスという言葉を聞いたことがありますか?
01:56
play_arrow
パララックスとは
00:38
play_arrow
パララックスを実際に見てみよう
05:11
play_arrow
背景固定の作り方
01:22
play_arrow
背景を固定するときのHTMLとCSSの実装を見てみよう
03:02
play_arrow
header周辺のページの構造を見てみよう
10:24
play_arrow
時間差で降りてくる雪の作り方
00:59
play_arrow
時間差で降りてくる雪の実装を見てみよう
05:12
play_arrow
border-radiusの指定
12:24
play_arrow
一定のスクロール量で現れる要素の作り方
08:19
play_arrow
まとめ
01:09
play_arrow
Q.backgroundを#fffやrgbaではなく、whiteにすると崩れるのはなぜですか?
01:17
play_arrow
Q.雪の効果は実際のWEBサイトでは、どんな時に、使う事が多いですか?また、LP(ランディングページ)サイトとかは、パララックス効果、よく使われますか?
01:33
play_arrow
Q.背景画像の固定で「position: fixed」と「background-attachment: fixed」の違いを教えてください。
01:11
play_arrow
Q.jqueryの上の部分ではvar top = $('.header').offset().top;下の部分ではvar topBtn = $('#area03Menu'); なんですが、.offset().topはなんですか?変数に入れるという処理はわかるのですが、この二つの違いはなんでしょうか?
01:04
play_arrow
お知らせ