WebデザイナーのためのjQuery実践講座

ヘッダーサイズを大きくして影を消す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザスクロールの位置によって、ヘッダーのサイズ大きくして、影を消す方法について解説致します。
講師:
03:27

字幕

このレッスンでは ブラウザスクロールの 位置によってヘッダーのサイズを大きくして─ 影を消す方法について解説していきます まずはダウンロードしてきた こちらの headersize-big― というフォルダーの中に入っている― こちらの js フォルダーの中の この javascript.js― ファイルをエディターで開いてください そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの解説を 進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回 注目して頂きたい部分は こちらの部分となります 前回までのレッスンでブラウザに対して スクロールイベントを登録して─ そしてスクロールされる度に そのブラウザのスクロール位置を取得して─ こちらの変数 pos に代入しました そして if 文を使って― そのスクロール位置が30ピクセル以内か― もしくは 30 ピクセル より上かを条件分岐させて─ そして 30 ピクセルより上の場合には そのヘッダータグに対して― small というクラスを付けました 今回はその逆で30ピクセル以内であれば― その small というクラスを取り除く といった処理を実装したいと思います それがこちらの部分となります それでは 順番に見ていきます まずは同じように $ ('header') と書きます これでヘッダータグという意味になります そして その後に removeClass と書きます これはその名のとおり この removeClass の後の― 括弧の中に書かれたクラスを 削除するという意味になります そして 今回 その括弧の中には small というクラスを指定しています このようにすることでブラウザの─ スクロール位置が30ピクセル以内に 入った時 small というクラスが─ ヘッダータグから取り除かれる といった形になります それでは この状態で先ほど ダウンロードしてきた― index.html ファイルを ブラウザで開いて― 動作を確認してみましょう はい こちらがその index.html  ファイルをブラウザで開いた状態です それでは ブラウザを スクロールさせてみましょう まずは このように下方向にブラウザを スクロールさせると このような形で─ ヘッダー部分のサイズが小さくなって 影が付いてきました これはこのヘッダータグに small というクラスが付いているからですね それでは 逆にこのブラウザのスクロールを 上に戻してみましょう すると このように元の状態に戻りましたね これはヘッダータグに付いていた─ small というクラスが削除された ことによるものです これでスクロール位置に応じた ヘッダーレイアウトの変更の実装は─ 完了致しました 以上でレッスンは終了です 今回はブラウザースクロールの位置によって ヘッダーのサイズを大きくして─ 影を消す方法について解説致しました このレッスンを持ちまして 今回のコースの解説は全て終了となります このように複雑なプログラムの知識を 持っていなくても jQuery と― jQuery プラグインを 利用することによって― こういったリッチなウエブサイトを 作ることができるようになります 是非 これらをうまく活用して 素晴らしいウエブサイトを作っていきましょう

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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