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

スクロールに応じたメニュー表示の切り替え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページスクロールの位置に応じて、上部のヘッダーメニューの選択状態を切り替える方法について解説致します。
講師:
07:15

字幕

このレッスンでは ページスクロールの位置に応じて 上部のヘッダーメニューの選択状態を 切り替える方法について解説いたします まずはダウンロードしてきたこちらの switch_menu という フォルダの中に入っている js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう まずは現状の index.html ファイルをブライザで開いて 今回 実装していく内容の 確認をしてみたいと思います 現状の index.html ファイルは 先ほどダウンロードしてきた ファイルの中に含まれています こちらの一つ階層上の この index.html ファイルですね これをブラウザで開きます そしてこれがそのファイルを開いた状態ですね それではこのページを スクロールダウンしてみましょう 少しスクロールダウンすると  この様にヘッダーメニューがでてきますね そしてここに表示されている 各メニューボタンに注目してください このままスクロールダウンをしていくと このように施設案内に入った時に この選択状態が変わりましたね そしてさらに イベント情報までいくと 今度はイベント情報の方に 選択状態が切り替わりました そして最後に このお問い合わせと いくと この様にお問い合わせの方に 選択状態が替わりましたね もちろん上にスクロールして 戻る場合も同じです イベント情報に戻って そしてまた ここのタイミングで 施設案内に戻ります そして このボックスの中央あたりで ホームに選択状態が切り替わります そして非表示になる といった形ですね 今回はこの部分の実装について 見ていきたいと思います それではエディタに戻ります そして今回 注目していただきたい部分ですが こちらのscript.js ファイルの中の こちらの部分となります それでは順番に見ていきましょう まずはこちらの部分ですね section♯box1 として waypoint function direction と書いて { } そして offset を 0 にしています 要するにこの section タグの上辺が ブラウザの表示領域の上辺と一致した時 この中の処理が実行されるという形です そしてさらに direction down としています ブラウザのスクロールが下向きの時のみに 実行するという形ですね そしてその時に nav タグの中の li タグに対して removeClass そして selected としています この selected という Class は CSS の方に設定しているのですが この selected の Class が この li タグに付くと そのヘッダーメニューの項目が 選択状態となります ここではその selected という Class を この nav タグの中の li 要素 全てから取り除いています 要するに初期化している状態です そして次に こちらの nav タグの中の li 要素で eq0 と書いていますね 要するに nav タグの中の 一番初めの li タグに対して addClass そして同じく selected としています こうすることによって この box1 という ID が付いた section の上辺がブラウザの 表示領域の一番上 の位置に一致すると この一番目の li タグに 対して selected 要するに選択状態の Class が 付加される訳ですね ここまでできたら 他の box に対しても 同じ様に指定してあげます こちらは box2 の方ですね こちらは eq1 要するに 二番目の li 要素に対して addClass selected 選択状態の Class を 付加しろといった形です 同じ様に box3 box4 も 同様に行っていきます そして次に今度は逆で 上へのブラウザスクロール時の 時の設定を行っていきます 要領は全く同じです まず box1 のこの部分を 見てみましょう 同じ様に box1 の ID が付いた section に対して waypoint function direction という形で設定して offset の部分に upPoint という変数をあてています この upPoint という変数ですが こちらの script.js ファイルの この部分に定義しています この部分で何を定義しているかというと 0-screeHeight/2 という形ですね 要するにブラウザの縦幅です これを割る 2 をして 半分の高さの値を求めます そしてそれを 0 で 引いてあげることによって マイナスの値に変えています それをこの変数 upPoint に 設定しています そして元の位置に戻って こちらの部分ですね その値をこの offset に 設定してあげることで この box1 という ID を持った この section タグの上辺が ブラウザの表示領域の上辺から -100 ピクセルした位置に 移動してきたら という意味になります そしてこの if 文の部分ですね direction === の up として ブラウザスクロールが上向きの時にのみ 発動する処理を書いています そして先ほどの下向きの処理と同じ様に まずは全ての li 要素から selected という Class を取り除きます そしてその次ですね こちらの部分では eq0 要するに nav タグの中の 一番初めの li タグに対して 同じ様にこの selected という Class を付加してあげています この一連の処理でどういったことが 起きるかというと ブラウザスのスクロールを 下から上に移動させた場合 その該当するボックスの真ん中の位置まで 表示されてきたら それに連動するヘッダーメニューの項目を 選択状態にするといった処理となります ここまで出来たら 他の box に対しても 同じ設定を行います box2 box3 box4 と それぞれ対応する li タグを 指定してあげることによって それぞれのヘッダーメニューの中の 該当する項目を選択状態にすることが できる訳ですね この様に設定することで 先ほどブラウザで確認したような ヘッダーメニューの挙動を 実装することが可能です 以上でレッスンは終了です 今回はページスクロールの位置に応じて 上部のヘッダーメニューの選択状態を 切り替える方法について解説いたしました このレッスンをもちましてパララックス効果と スクロールエフェクトを使った ウエブページの作り方のコースは 終了となります このコースの内容を一通り習得すれば さらに自分で応用して パララックス効果や スクロールエフェクトを使った ウエブページを作成できるようになりますので ぜひともマスターしておきましょう

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

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

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

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

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

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