おためし受講中

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

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

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

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

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

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

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

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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    授業の流れ
    01:19  (00:25 ~ )
    パララックス全体の説明
    00:55  (01:44 ~ )
    質問:パララックスという言葉を聞いたことがありますか?
    01:56  (02:39 ~ )
    パララックスとは
    00:38  (04:35 ~ )
    パララックスを実際に見てみよう
    05:11  (05:13 ~ )
    背景固定の作り方
    01:22  (10:24 ~ )
    背景を固定するときのHTMLとCSSの実装を見てみよう
    03:02  (11:46 ~ )
    header周辺のページの構造を見てみよう
    10:24  (14:48 ~ )
    時間差で降りてくる雪の作り方
    00:59  (25:12 ~ )
    時間差で降りてくる雪の実装を見てみよう
    05:12  (26:11 ~ )
    border-radiusの指定
    12:24  (31:23 ~ )
    一定のスクロール量で現れる要素の作り方
    08:19  (43:47 ~ )
    まとめ
    01:09  (52:06 ~ )
    【後半】質疑応答
    Q.backgroundを#fffやrgbaではなく、whiteにすると崩れるのはなぜですか?
    01:17  (53:30 ~ )
    Q.雪の効果は実際のWEBサイトでは、どんな時に、使う事が多いですか?また、LP(ランディングページ)サイトとかは、パララックス効果、よく使われますか?
    01:33  (54:47 ~ )
    Q.背景画像の固定で「position: fixed」と「background-attachment: fixed」の違いを教えてください。
    01:11  (56:20 ~ )
    Q.jqueryの上の部分ではvar top = $('.header').offset().top;下の部分ではvar topBtn = $('#area03Menu'); なんですが、.offset().topはなんですか?変数に入れるという処理はわかるのですが、この二つの違いはなんでしょうか?
    01:04  (57:31 ~ )
    お知らせ
      (58:35 ~ )