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

スクロールに応じたヘッダーメニューの表示

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

ぜひご覧ください。

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

字幕

このレッスンではページスクロールに応じて ヘッダメニューを表示させる方法について 解説したします 先ずはダウンロードしたこちらの show_menu というフォルダの中の js フォルダの中の こちらの script.js をエディタで開いて下さい これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を進めていきます では早速レッスンを始めます まずは現状の index.html をブラウザで開いて 今回実装する内容を確認してみましょう その index.html は先程ダウンロードした ファイルの中に含まれています こちらのファイルですね こちらのファイルをブラウザで開いて 確認してみましょう これがそのファイルを開いた状態です では この Web ページを下に少し スクロールしてみましょう このようにヘッダメニューがスライドして 表示されてきましたね 今回はこの実装を行ってみたいと思います ではエディタに戻ります 今回注目していただきたい部分は こちらの script.js の中の こちらの部分となります では 順番に見ていきましょう まずは $header と書いて waypoint そして function そして引数に direction そして{ } そして offset: -100 と設定して そして ); と書いています これは前回までのレッスンで解説した waypoint の設定ですね このようにすることで header タグが offset: -100 ブラウザの表示領域の上辺から -100 ピクセルの位置に移動した際に こちらの function の中の この処理が実行されるといった形です そして更にこの function の中では if 文を使って direction が down のときに こちらの この if 文の中の処理が実行される という形を作っています 要するに ブラウザのスクロールの向きが 下向きのときに こちらの処理を実行するといった形ですね そして その中の処理はこのように書いています $('header').animate( ); そして この animate の( )の中には { }を一つ作って  その中に top: '0px' と書いています こうすることで この header タグに 囲まれたコンテンツが top: '0px' の位置まで アニメーションしてくる といった命令になります ここまで書けたら 次は こちらの部分に注目して下さい こちらの部分では この Web ページが読み込まれた際に この header タグの CSS に対して top -50px を指定しています こうすることによって ページが読み込まれた際は こちらの header タグのコンテンツが top -50px の位置に移動するために 隠れた状態となるわけです そして先程実装したこちらの部分 offset -100 のときに top 0px の位置に この header をアニメーションしてくる といった命令になるので このようにしておくことで この -50px から0px まで この header 要素がアニメーションして 表示されてくるわけですね ここまで実装できれば先程ブラウザで 確認したような形で header メニューがスクロールに応じて 表示されてくることになります 以上でレッスンは終了です 今回はページスクロールに応じて ヘッダメニューを表示させる方法について 解説しました 以降のレッスンではページスクロールに応じて ヘッダメニューを非表示にさせる 方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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