jQuery TECHNIQUE - CHAPTER LIST
PART01
jQueryのさまざまなテクニック
CHAPTER01
animate()メソッド使ったアニメーション
CHAPTER02
クラスの追加/削除によるアニメーション
[1]ボタンの背景色を変更する
[2]四隅を角丸に変化させる
[3]ボタンを回転させる
[4]ボタン画像を拡大する
CHAPTER03
メガドロップダウンを作ってみよう
CHAPTER04
ツールチップを作ってみよう
CHAPTER05
ニュースティッカーを作ってみよう
[1]フェードアニメーションで切り替わる
[2]ロールアップで切り替える
[3]スライドインで切り替える
CHAPTER06
入力フォームの簡易バリデーション
CHAPTER07
入力フォームに文字カウントを設置する
[1]カウントアップ
[2]カウントダウン
CHAPTER08
画面上で右クリックを禁止させる
[1]ページ全体を右クリック禁止にする
[2]要素のみを右クリックを禁止にする
CHAPTER09
デバイスピクセル比を判別して画像を切り替える
CHAPTER10
スマートフォンでの縦向き・横向きを判別する
CHAPTER11
スクロールイベントで値を取得する
[1]ページ全体のスクロール値を取得する
[2]ページ最下部に到達したら文字色を変更する
CHAPTER12
スクロールしても固定表示されるボタンを設置する
[1]ページ右下に常に「ページトップへ」ボタンを表示する
[2]はじめは「ページトップへ」ボタンを表示しない
CHAPTER13
スクロールして特定の位置にたどり着いたらアニメーションを実行する
CHAPTER14
スクロールしても付いてくる追尾型ナビゲーション
CHAPTER15
画像をランダムで表示する
[1]画像をランダムに切り替える
[2]適用するスタイルもランダムに切り替える
CHAPTER16
ウィンドウサイズによって読み込む画像を切り替える
CHAPTER17
ページ遷移時にフェードアニメーションをつける
CHAPTER18
画面に並べられた画像を順々にフェードイン表示する
[1]上から順番にフェードイン
[2]ランダムなフェードイン
CHAPTER19
画面上に並べられた画像を特定のグループに分けてフィルタリングする
CHAPTER20
並べられた要素の高さを一番大きい高さに揃える
[1]要素の高さを最大値に揃える
[2]1行ごとに要素の高さを揃える
PART02
プラグインを使わないで実装してみよう
CHAPTER21
背景画像をフルスクリーンサイズで表示する
[1]画像単体をフルスクリーン表示
[2]背景の画像をスライドショー形式で切り替える
CHAPTER22
モーダルウィンドウを作る
[1]モーダルウィンドウ用のソースをページに配置する
[2]ソースを外部から読み込む
[3]ソースを外部HTMLにしてiframeで読み込む
CHAPTER23
タブとアコーディオンを切り替えるUIを作成する
CHAPTER24
レスポンシブに対応した開閉式ナビゲーションメニューを作成する
[1]ページ上部にアコーディオン形式で配置する
[2]ページサイドにスライドメニュー形式で配置する
CHAPTER25
テキストが長い場合は「続きを見る」リンクを表示する
CHAPTER26
「もっと見る」ボタンで画像を順々に読み込む
[1]画像のみを読み込む
[2]リンクの付いた画像を読み込む
CHAPTER27
横向きのスライドパネルUIを作る
[1]1つずつ移動するスライドパネルUI
[2]ページネーションつきでまとめてスライドさせる
CHAPTER28
要素が自動で流れ続けるループスライダーを作る
[1]横方向に流れるループスライダー
[2]縦方向に流れるループスライダー
CHAPTER29
複数画像をクロスフェードで切り替えるスライドショーを作る
[1]画像だけがクロスフェードで切り替わるシンプルなスライドショー
[2]ページネーションとナビゲーションボタンを追加
[3]サンプル[1]と[2]の機能を融合させる
[4]自動再生機能をマウスオーバーで一時停止させる
[5]ページネーションをサムネイル画像にする
CHAPTER30
ウィンドウ幅いっぱいに広がるコンテンツスライダー
[1]前後の画像を左右にオーバーレイの状態で表示
[2]レスポンシブ対応でスワイプ機能をつける