Webデザイナー必携! コピペで使える、Webページに様々な動きを加えるサンプル集
Webデザイナー必携! コピペで使える、Webページに様々な動きを加えるサンプル集
本書では、Webページによく実装される「動くパーツ」を13種類に分類して解説しています。特設サイトやダウンロードできるサンプルデータのコードをそのままコピー&ペーストするだけで、動きを実装することができます。
◎取り上げている動き
ローディング/画面遷移/グローバルナビゲーション/ハンバーガーメニュー/テキストナビゲーション/タブメニュー/スライドショー/ギャラリー/動画/ボタン/検索/ページトップリンク/ページ内リンク/スクロールダウン/アコーディオンパネル/ツールチップ/ニュースティッカー/グラフ/モーダルウィンドウ
SECTION 1-1 女性向けのエステサロンのサイト
SECTION 1-2 男性向けの輸入車販売代理店のサイト
SECTION 1-3 子ども向けの学習塾のサイト
SECTION 1-4 科学的な研究所のサイト
SECTION 1-5 写真が並ぶギャラリーのサイト
SECTION 1-6 大きく写真を見せるポートフォリオのサイト
SECTION 1-7 ミニマルな企業サイト
SECTION 1-8 先進的な企業サイト
SECTION 1-9 堅実的な企業サイト
SECTION 1-10 映画・音楽のエンタメ系サイト
SECTION 1-11 フラワーショップのECサイト
SECTION 1-12 アパレルのブランディングサイト
SECTION 1-13 和風の老舗料亭のサイト
SECTION 2-1 Webサイトにおける「動き」の役割
SECTION 2-2 Webサイトで「動き」が発生するタイミング
SECTION 2-3 Webサイトで「機能の動き」が組み込まれている場所
SECTION 2-4 Webサイトの動きを実現する仕組み
SECTION 3-1 jQueryの基本
SECTION 3-2 CSSアニメーションの基本
SECTION 3-3 jQueryとCSSを組み合わせて動かす
SECTION 3-4 動かない時のチェック項目
SECTION 4-1 ローディング
SECTION 4-2 画面遷移
SECTION 5-1 グローバルナビゲーション
SECTION 5-2 ハンバーガーメニュー
SECTION 5-3 テキストナビゲーション
SECTION 5-4 タブメニュー
SECTION 6-1 スライドショー
SECTION 6-2 ギャラリー
SECTION 6-3 動画
SECTION 7-1 ボタン
SECTION 7-2 検索
SECTION 8-1 ページトップリンク
SECTION 8-2 ページ内リンク
SECTION 9-1 スクロールダウン
SECTION 9-2 アコーディオンパネル
SECTION 9-3 ツールチップ
SECTION 9-4 ニュースティッカー
SECTION 9-5 グラフ
SECTION 9-6 モーダルウィンドウ