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

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

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

ぜひご覧ください。

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

字幕

このレッスンでは ページスクロールに応じて ヘッダーメニューを非表示にさせる 方法について解説いたします まずはダウンロードしてきた こちらの hide_menu という フォルダの中に入っている この js フォルダの中の この script.js ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回の レッスンの解説を進めていきたいと思います それでは早速レッスンを 始めていきましょう まずは現状の index.html ファイルを ブラウザで開いて 今回実装する内容の確認を してみたいと思います その index.html ファイルは 先ほどダウンロードしてきたー ファイルの中に入っています そのファイルは こちらのファイルですね こちらのファイルをブラウザで ひらいてみましょう そしてこれがそのファイルを 開いた状態です ではこちらの web ページを スクロールしていってみましょう まず少し下にスクロールさせると このように前回のレッスンで 実装したこのヘッダーメニューが 表示されてきましたね それではこの状態で次は 上にスクロールしてみましょう するとこのように 次はヘッダーメニューが 非表示となりましたね 今回はこの実装方法について みていきたいと思います それではエディタに戻ります そして今回注目していただきたい点は こちらの script.js ファイルの中の こちらの部分となります 前回のレッスンではこちらの (direction === 'down' )の中に このヘッダータグを top: '0px'の位置に アニメーションして表示させろ といった実装を行いました 今度はその逆ですね (direction === 'up' )の時 要するに上向きのスクロールの時に このヘッダータグの内容を top: ’-50px' の位置に アニメーションさせろ といった処理となっています この -50px というのは こちらの部分でも設定した内容ですね 要するにページが読み込まれた際に 設定したヘッダーの位置に戻せ といった意味になります こうすることでこのヘッダータグ の内容自体が −50px の位置に 隠れるー非表示になる といった形になります このように実装することで 先ほどブラウザで確認したような ヘッダーメニューの挙動になるわけです 以上でレッスンは終了です 今回はページスクロールに応じて ヘッダーメニューを非表示にさせる 方法について解説いたしました 以降のレッスンでは webページ内において ボタンをクリックすることによって スムーズにページをスクロールさせて 該当箇所に移動する機能を実装する 方法について解説していきますので そちらも合わせてご覧ください

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

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

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

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

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

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