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

ヘッダーメニューのスクロール追随処理

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
上部ヘッダーメニューを、ページスクロールに追随させる方法について解説致します。
講師:
02:50

字幕

このレッスンでは上部ヘッダーメニューを ページスクロールに追随させる方法 について解説いたします まずはダウンロードしてきたこちらの fix_position というフォルダの 中に入っている こちらの CSS フォルダの中の この style.css ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは現状の index.html ファイルを ブラウザで開いて 今回の実装内容を確認 してみたいと思います index.html ファイルは 先ほどダウンロードしてきた ファイルの中に入っています こちらのファイルですね こちらのファイルを ブラウザで開いてみましょう そしてこれがその index.html ファイルを 開いた状態です 今回はこの上部に表示されている ヘッダーメニューを ブラウザのスクロールに このように追随させる方法について 見ていきたいと思います それではエディタに戻ります そして今回注目していただきたい部分は こちらの style.css ファイルの こちらの部分となります それでは順番にみていきましょう まずはこちらのヘッダータグに対して position: fixed; を指定します こうすることによってこの ヘッダー要素の位置が固定化されます そしてその固定化する位置ですが top: 0; と書きます こうすることでブラウザの表示領域の 一番上に表示された 状態で固定されます そしてその次に こちらを先に見てみましょうか z-index: 10; としています こうすることでこのヘッダータグの コンテンツを他のコンテンツよりも 上のレイヤーに設置することができます そしてこの状態でこちらの部分 background-color: #fff; と書いて このヘッダータグの背景色を 白に設定します こうすることによって このヘッダータグがスクロールして 他の要素よりも上に表示された場合でも このヘッダータグの背景に白色 を設定していることで ヘッダータグの下に重なった 要素を見えないようにしています このように設定することによって 先ほど確認したような スクロールに追随するような コンテンツを作成することが 可能になるわけです 以上でレッスンは終了です 今回は上部ヘッダーメニューを ページスクロールに追随させる 方法について解説いたしました 以降のレッスンからは Web ページ上の要素に対して 実際にスクロールエフェクトを 実装していく方法について 解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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