Chapter5

• 滑らかな動きのスライドショー【作成物リンク01】
• 多機能なスライドショー【作成物リンク02】
• スティッキーヘッダー【作成物リンク03】
• デザインが変化するスティッキーヘッダー【作成物リンク04】
• 画面領域を有効活用できるタブ【作成物リンク05】
• 高機能で拡張しやすいタブ【作成物リンク06】
• スムーズスクロール【作成物リンク07】
• 拡張性のあるスムーズスクロール【作成物リンク08】

1. スライドショーに関して【簡易版】【多機能版】
2. タブ【簡易版】【高機能版】
3. スティッキーヘッダー【簡易版】【デザイン変化版】
4. スムーズスクロール【簡易版】【拡張性あり版】

eqメソッド

• 「複数あるjQueryオブジェクトのうち、引数に渡したインデックスに該当するものを選択するメソッド」
• ※インデックスとは、配列の各要素に振られる数値のこと

実例

currentIndexに[0]をセットした場合、$slides.eq(0)をいうことになる つまり、４枚あるうちの１枚目が選択されるということです。

fadeInメソッド

• 「display: none;が指定されて非表示になっているのを徐々に不透明度を変化させながら表示させるメソッド」

fadeOutメソッド

• fadeInメソッドと対になるメソッドなので、説明を省きます

hasClassメソッド

• 要素集合全てのうちから、引数に指定したクラスを持つ要素がひとつでもあればtrueを返す。
• 類似メソッド：is(”.”+class)
• リファレンスサイト参照

htmlメソッド

• 最初の要素をHTML文字列で返す。組み込みであるinnerHTMLの値と同じ。この関数はXMLでは動作しないが、XHTMLでは有効である。
• リファレンスサイト参照

setIntervalメソッド

使い方

7500ミリ秒(7.5秒)ごとにshowNextSlideを実行

オリジナル関数の作成

(例) ※赤文字部分の様に、名前つけて処理を呼び出す入れ物として使います

スライドショーの概要

スライドショーとは、時間の経過やボタンのクリックなどによって
「スライド」(画像など)が切り替わるコンポーネント(部位)です。

スライドショーの処理の流れ

この手順を念頭において作成する

1. 全てのスライドを1箇所に重ねて配置し、一旦、非表示にする
2. 最初のスライドのみをフェードインで表示する
3. 一定時間が経過したら、現在表示されているスライドをフェードアウトで非表示にし、次のスライドをフェードインで表示する
4. 以降は一定時間ごとに「現在のスライドをフェードアウト」と「次のスライドをフェードイン」を繰り返す
5. 最後のスライドが表示されたら先頭のスライドに戻り、[4]の処理を繰り返す。この動作はユーザーがそのページから離れるまで繰り返される

主なjQueryメソッド

• each()
• find()
• eq()
• fadeIn()
• fadeOut()

主なJavaScriptメソッド

• setInterval()

異常系の対応策

Modernizr

Modernizrは、ユーザーのブラウザでブラウザでJavaScriptやCSSなどの特定の機能が利用できるかどうかを検出するJavaScriptのライブラリーです。

上記のケースに対して

• 「ブラウザのJavaScriptが有効かどうか」を取得できる

ので、クラス名を有効時と無効時で場合分けをする処理を記載すると対策できます。
細かい記述方法は、ググると出る気がします。ここではそんなものあるんだくらいでいいです。

スライドショーの概要

簡易版だと細かな操作したい人にとっては不満を持つ人もいるでしょう。
そこでいろんな機能を盛り込んだ多機能版を作成しよう。

スライドショーの処理の流れ

この手順を念頭において作成する

1. スライドの[戻る]や[進む]が可能な「ナビゲーション機能」
2. スライドの総数が画面下部がドットで示し、それぞれをクリックすることで該当のスライドを表示する[インジゲーター機能]
3. 一定時間ごとに自動で次の画像を表示する「オートプレイ機能」
4. マウスオーバーでスライドショーを停止し、離れると再開する「ポーズ機能」

主なjQueryメソッド

• addClass()
• removeClass()
• hasClass()
• html()
• css()
• animate()
• on()
• index()

主なjQueryプラグイン

• jQuery UI Effects Core

主なJavaScriptメソッド

• preventDefault()
• clearInterval()

スライドショーの構造

参考までに(類似記事の参照リンク)

スティッキーヘッダーの概要

常に画面上部にヘッダーを配置するコンポーネントです。
下記の画像のようなものがそうです。

スティッキーヘッダーの処理の流れ

1. ヘッダーのデフォルトの位置を保存する
2. ウィンドウのスクロール量を常に監視する
3. ウィンドウのスクロール量がヘッダーのデフォルトの位置を超えた場合は、ヘッダーをスティッキー配置する
4. ウィンドウのスクロールが画面上部まで戻ったら、ヘッダーをデフォルトの位置に戻す

主なjQueryメソッド

• offset()
• scrollTop()
• trigger()

スティッキーヘッダーの概要

初期時のまま上部に固定すると見づらくなってしまうので、
上部固定の初期値から離れた場合はデザインを変化するようにすると見やすくなります。
今回は、そういったものを作成します。

スティッキーヘッダーの仕組み

「初期状態のヘッターの内容を複製し、スティッキー用のヘッダーを新たに作る」という方法で作成します

1. 初期状態のヘッダーは動かさず、常に元の位置に配置する
2. ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく
3. ウィンドウのスクロールによって初期状態のヘッダーが非表示になった時点で、ヘッダーのクローンを見える位置に移動する

下記の画像のようなものを作成する

主なjQueryメソッド

• append()
• appendTo()
• contents()
• clone()
• outerHeight()

主なjQueryプラグイン

• jQuery throttle / debounce

パフォーマンスの低下を防ぐ処理

スクロールによる表示非表示でブラウザに負荷を与えてます。
軽減するには、実行頻度をある程度までに抑えられれば良いのです。

「スロットリング(throttling)」

『jQuery throttle / debounce』というプラグインで、上記の問題に対して
エラー処理を記載することができます。

実行例

タブの仕組み

ページが読み込まれた段階で全てのパネルを一旦、display: none;
で非表示にし、１番目のタブに対応したパネルだけをdisplay: block;で
で表示します。(クリックしたタブは活性化表示し、それ以外のタブは、非活性化表示する)

下記の画像のようなものを作成する

主なjQueryメソッド

• attr()
• hide()
• show()

タブの仕組み

05で作成したタブはキーボード操作ができない、何かしらの処理を実行することも困難です
今回作成するものの要点は下記にまとめます

1. キーボードによる操作を可能にする
2. 新しいタブが選択された際にアニメーション効果を追加する

主なjQueryメソッド

• position()

主なjQueryプラグイン

• jQuery UI tabs

jQuery UI とは

その名の通り、jQueryによるユーザーインターフェース系プラグインの集まりです。
自分で1から作成するとかなり大変なUIも、jQuery UIを利用すると簡単にサイト導入できます。

スムーズスクロールの仕組み

05で作成したタブはキーボード操作ができない、何かしらの処理を実行することも困難です
今回作成するものの要点は下記にまとめます

1. キーボードによる操作を可能にする
2. 新しいタブが選択された際にアニメーション効果を追加する

主なjQueryメソッドと主なjQueryプラグイン

• 特になし(jQueryの本なのに？)
• 強いて言えば、eachメソッドは使ってた

scrollableElement()関数

ユーザーが使用しているブラウザで利用できる要素(htmlまたはbody)を検出し、該当する文字を戻します。

Learning jQuery - Improved Animated Scrolling Script for Same-Page Links

参照リンク

スムーズスクロールの仕組み

Smooth Scrollプラグインを使用すると「同一ページ内の全てのリンクをスムーズスクロールにする」ということが簡単に実現できます

やること

• 「jquery.smooth-scroll.js」をダウンロードしましょう
• プラグインを使用できるように埋め込もう※下記の文を埋め込むこと

main.jsの上部に記載

主なjQueryプラグイン

• smooth　scroll