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

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

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

ぜひご覧ください。

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

字幕

このレッスンではパララックス効果や スクロールエフェクトを持った― ウェブページを制作するに当たっての― HTML コーディングの 方法について解説致します まずはダウンロードしてきたこちらの― HTML_coding という フォルダの中に入っている― この Index.html ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めて行きたいと思います それでは早速レッスンを始めて行きましょう ではまず完成形のウェブページを 確認しておきましょう これが完成形のウェブページです この完成形のウェブページを 構成してる要素ですが― まずこちらの一つ目の大きな枠 そしてこちらの 「施設案内」と書いている大きな二つ目の枠 そして「イベント情報」と 書いている三つめの大きな枠 そして最後に「お問い合わせ」と 書いてある四つ目の大きな枠で 構成されていて― そして上の部分にはこのヘッダーメニュー そして下の部分にはこのフッターが 存在している状態です そしてこの各 大きな枠の中に― それぞれの要素が 入っているといった状態ですね これを踏まえた上で HTML コーディングを行っていきます それではエディタに戻ります まず 大きくそのウェブページ上を 構成している「枠」を取っていきます まず ヘッダー部分は― この

タグで 囲って作成します そして一つ目の枠 ここでは「 box 」と呼んでいきます box は
タグで囲って― id を「 box1 」とつけています そして二つ目の box も 同じように
で作って id="box2" とつけています このような形で ここに box3 の
そして box4 の
と いった形で作成します そして最後にコピーライトが書いてあった フッター部分の枠を― この
タグで作成します そして各 大きな box の中の要素は― このように 先ほど作った― この
の中で コーディングしていきます この box の中を コーディングしていく際は― あまり HTML タグを使って― ガチガチにレイアウトを  固定するような形ではなくて― 出来るだけシンプルな構成で コーディングしていくのがベストです 後ほど これらの要素に対して― パララックスやアニメーション効果を 付けていくわけですが― あまりガチガチにレイアウトしてしまうと それが難しくなってきてしまうので― 極力 最低限のコーディングを 心がけるようにして下さい これがパララックス効果や スクロールエフェクトを 持ったウェブページを― HTML コーディングする際の ポイントとなります 以上でレッスンは終了です 今回はパララックス効果やスクロール効果を 持ったウェブページを制作するにあたっての― HTML コーディングの 方法について解説致しました 以降のレッスンではこのパララックス効果や スクロールエフェクトを持った― ウェブページを制作するに当たっての― CSS コーディングの方法について 解説致しますので― そちらも合わせてご覧ください

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

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

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

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

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

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