2017年7月26日に弊社のプライバシーポリシーが改定されました。引き続きLynda.jp日本版をご利用になることによりこれらの文書に同意されたものとみなされますので、事前にご確認ください。

JavaScript 実践講座:パララックス効果やスクロールエフェクトを使ってみよう

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

LinkedInラーニングの無料トライアルを今すぐ試そう

無料で視聴する すべての加入プランを見る
ページスクロールに応じて、ヘッダーメニューを非表示にさせる方法について解説致します。
講師:
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 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2015年04月16日

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

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

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