Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【jQuery】スクロールするとスライドで表示するヘッダーのアニメーションを実装してみる

      2016/02/05

最近は、jQueryを触る機会もだいぶ減ってきました(笑)そんな中久々にjQueryでスクロールするとスライドして現れるヘッダーのアニメーションを作ることになったのでメモします。
サンプルは下記に作成しました。

上記のサンプルを見ていただくを分かると思いますが、スクロールしていくと背景色が赤いヘッダーがアニメーションしながらスライドダウンして表示されるのが分かると思います。今回はこれを実装していこうと思います。

htmlでヘッダーを準備をする

まず、スライドでアニメーションさせる為のhtmlのソースを準備します。

ここは特に説明するほど難しくないのですが、まずアニメーションさせるヘッダーを「sub_header」としてその下に通常の「header」を用意しました。
後は、スクロールさせるためにダミーとなる高さをもったdivタグを用意しています。

アニメーションさせるサブヘッダーをCSSで設定する

今度は、アニメーションさせるサブヘッダーをCSSで設定していくのですが、今回はスライドでサブヘッダーが表示された後はそのままサブヘッダーをウィンドウの上部に固定させたいと思いますので、positionのプロパティでfixedを指定してヘッダーを固定させます。

今回はウィンドウの上に固定させるのでtopとleftのプロパティを0に設定します。

CSSに関しては後は自由に設定してもらって構いません。サンプルではナビゲーションっぽくしてます。

jQueryで実装する

アニメーションさせるにはjQueryを利用するのでjQueryをダウンロードするなりしてリンクしておいてください。

必要な情報を変数に保存する

まずは今回jQueryでアニメーションさせるサブヘッダーのオブジェクトや通常のヘッダーの高さ、その他アニメーションさせるスピードなど必要な情報を変数に代入しておきます。
下記のコードにコメントを書いています。

ポイントとしては、jQueryでアニメーションさせるタイミングを通常のヘッダーがスクロールで隠れたタイミングにしたいので、ヘッダーの高さを取得するのですが、ヘッダーなどはpaddingなどが含まれている事もおおいので今回はouterHeight()のメソッドを利用してpaddingを含んだ高さを取得しています。

アニメーションさせるサブヘッダーの初期位置を設定

ページが表示された時に出ているのはおかしいので初期の段階ではウィンドウの上部に隠れている必要があるので、jQueryでサブヘッダーの位置をサブヘッダーの高さ分マイナスの位置に指定する必要があります。

上記のように設定しておけば、ページが読み込まれた段階ではサブヘッダーは隠れているはずです。

スクロールした時のページ内のスクロール量(現在の位置)を取得する

jQueryでウィンドウのスクロール量(現在の位置)を取得するには、windowオブジェクトにscroll()イベントを設定してスクロールしているか監視します。

scroll()イベントが動作している時はスクロールしているということになるので、そこでscrollTop()でスクロールの移動量を変数winTopに代入します。

jQueryのanimate()でサブヘッダー表示・非表示させるアニメーション

サブヘッダーをjQueryのanimate()でアニメーションさせるには、いつ表示・非表示させるのか?という基準となる値が必要になりますが、基準値は通常のヘッダーの高さとなる変数navTopとしています。

理由は通常のヘッダーがスクロールによってウィンドウ上から隠れたタイミングでサブヘッダーをスライドダウンで表示させるアニメーションを実行させたいので「スクロールの移動量が通常のヘッダーの高さを超えた場合」を条件分岐として、表示・非表示を切り替える為です。

サブヘッダーを表示させるアニメーション

条件が成立したら、ページを読みこんだ時点ではサブヘッダーのtopのプロパティにはマイナスの値が設定されているので、topの位置をanimate()で0にすることでウィンドウの上部にスライドダウンして表示されます。
また、サブヘッダーのpositionにはfixedが指定されているので表示されている間はウィンドウ上部に固定されて表示されます。

サブヘッダーを非表示させるアニメーション

表示されたサブヘッダーを非表示にするには、「スクロールの移動量が通常のヘッダーの高さを下回った場合」になるので通常のヘッダーがウィンドウ上に表示されてる事になります。
そのタイミングでサブヘッダーの位置をanimate()でサブヘッダーの高さ分(変数:sh_h)マイナス方向にアニメーションさせます。そうすることでサブヘッダーがスライドアップされてウィンドウ上部に隠れます。

animate()を使う場合の注意点

今回の記事に限ったことではないのですが、animate()を実装した場合にはanimate()を実行する直前にstop()を実行してください。

これは、animate()はイベントが発生した数だけ実行されるようになっているので、下手すると通常のヘッダーがウィンドウ上から消える境目で何度もスクロールダウンとスクロールアップを繰り返すとそれだけアニメーションの処理が溜まっていきます。
するとスクロールをしていない時も溜まっていたアニメーションが実行されてるので、スライドダウンとスライドアップするアニメーションが繰り返される事になりかねませんので注意してください。

まとめ

以上で、jQueryでスクロールするとスライドで表示するヘッダーのアニメーションの実装の説明は終わりです。

ここ最近では、通常のヘッダーのほかにサブヘッダーを用意し最低限のナビゲーションを設置してユーザビリティを確保するサイトも増えてると思います。こちらのAdverTimes(アドタイ)| 広告界のニュース&情報ポータルサイトのサイトもその一つですのでぜひ参考にしてみてください。

 - jquery ,

     

Message

  関連記事

no image
jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させる …

no image
jQuery ちょっとHTML操作

今更ながら、使ったことがないので調べてみてちょっと知ったのでメモ。 wrapAl …

jquery-icon
【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「paren …

jquery-icon
【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた!!

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

jquery-icon
【jQuery】ブラウザのタブが非アクティブ時でもsetIntervalの挙動について!

丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックする …

js-icon
iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

no image
jQuery ページ内スクローラーを調べた

ページスクローラーの仕組みを調べてみた。 動作結果 ページをスクロールさせるター …

jquery-icon
【jQuery】画像のキャプションのアニメーション

いやーユニクロのサイトがリニューアルされて相変わらずかっこいい!! その画像のロ …

jquery-icon
【jquery】$.postを利用してCSVを読み込む

jQueryの$.postを利用してCSVを読み込む案件がありそうだったので、今 …

no image
jQuery  要素集合の特定要素とそれ以外の要素の操作

以前にも書いたが、よくjQueryやActionScriptでは下記のようロジッ …