JavaScript 実践講座:パララックスアニメーション

パララックス効果の為のCSSコーディング

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
パララックス効果やスクロールエフェクトをもったWebページを制作するにあたっての、CSSコーディングの方法について、解説致します。
講師:
04:45

字幕

このレッスンでは パララックス効果や スクロールエフェクトをもった ウエブページを制作するにあたっての CSSコーディングの方法について 解説いたします まずはダウンロードしてきた こちらの css_cording という フォルダの中に入っている この css フォルダの中の この style.css ファイルを エディタで開いてください そしてこれがそのファイルを 開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず始めに この css が適用された後の状態の index.html ファイルをブラウザで 開いて確認してみたいと思います そのファイルはというと 先ほどダウンロードしてきた ファイルの中に入っている こちらの index.html ファイルですね これをブラウザで開いてみてください そしてこれがその index.html ファイルを 開いた状態です このように きれいにページとして 表示されてきましたね ただ見ていただいて わかる通りに パララックス効果もついてないですし スクロールエフェクトもついてないですね それでは今回は このレイアウトに もっていくための CSS コーディングの方法 いくつかのポイントについて 見ていきたいと思います それではエディタに戻ります まずページの横幅ですが これはブラウザ幅に 追随させるような形のレイアウト と したい為 このように width 100% を 指定していきます このように body タグだけではなくて body の中の header タグや section タグ これは大きなボックスを 定義しているタグでしたね それらに対して100% を設定してあげます そして各ボックス 大きな背景画像の入った ボックスなどですね そのようなボックスに対しては 背景画像を指定してあげます それがどの部分かというと この部分ですね このようにしておいてあげます そしてこの各ボックスの縦幅ですが これは後のレッスンで JavaScript を使って ブラウザの縦幅に合わせる といった処理を加えますが 今の段階では それは行いませんので ここでは適当な数値 height 800px を設定しています そして各ボックスの中に 入っていたコンテンツですが 横軸の真ん中に表示させたい デザインとなっていたので その場合はこのように設定します 例えばここは sectionIDBOX1 要するに1つ目のボックスの div クラスの title デザインでいうとこちらの部分ですね ちょうどこの要素はブラウザの 横幅の中心に表示されてきています それではエディタに戻って そのセンタリングを 実装するにあたっては このように書いていきます まずその要素の width を 指定してあげます 今回は 557px ですね そしてその後に このように書いてあげます margin そして 50px auto 0 と書きます 重要なのはこちらの部分です この部分は左側と右側 両サイドに対する margin の指定を行なう所ですが width の px 数を指定した上で ここを auto にすると この該当する div クラス title の 要素が横軸でセンタリングして 表示されてくるようになります これはよく使うテクニックなので 覚えておきましょう その他の部分のコーディングに関しては 基本 通常通りのコーディングを していただいても構いませんが 例えばアニメーションなどの効果を 実装したい要素などがある場合は 極力 position absolute などを使って 後々 その要素の位置を 動的に変更できるような 柔軟な CSS のコーディングを しておいた方がベターです 勿論それは どのように動かしたいかや そのデザインにもよってきますが あまりガチガチに CSS で レイアウトを固定してしまうと 後でアニメーション効果をつけづらく なってくる可能性もありますので できるだけ遊びをもたせた CSS のコーディングを するように心がけてください 以上でレッスンは終了です 今回はパララックス効果や スクロールエフェクトを もったウエブページを 制作するにあたっての CSS の コーディング方法について解説いたしました 以降のレッスンでは CSS3 の機能を使って 要素サイズに合わせた背景画像のサイズの 調整方法について解説いたしますので そちらも合わせてご覧ください

JavaScript 実践講座:パララックスアニメーション

このコースではページに奥行き感が出せるパララックス効果と、ページをスクロールしてゆくと少しずつ表示内容が変わってゆくスクロールエフェクトを使って、動きのあるWebページを作成する方法について解説します。jQueryプラグインstellar.jsとWaypointsについてや実装のためのHTMLやCSSのコーディング方法などについても解説します。

1時間30分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。