サンプルファイル一覧
番号は書籍内の「サンプルファイル○○参照」に対応しています。各ページではコードを書き換えながらプレビューで動きを確認できます。
Introduction-01
なぜWebに動きが必要なのか
01-01
図版 01-1 Webサイトの動きの例（ボタンのフェードイン・ボタンのマウスオーバー・プログレスバー）
01-02
図版 01-2 スクロールを誘導するアニメーション（動きがない例・動きがある例）
01-03
図版 01-3 ページ内の移動を伝えるアニメーション（瞬時に切り替わる・滑らかにスクロールする）
01-04
図版 01-7 意味のない動きは避ける（リンクでない文字の色が変わる・リンクテキストの色が変わる）
01-05
図版 01-8 邪魔になる動きは避ける（1枚ずつゆっくり表示・0.2秒の時差で表示）
01-06
図版 01-9 動きと意味を統一する（バラバラ・統一）
Introduction-02
動きの基本原則
02-01
図版 02-1 アニメーションの原理
02-02
図版 02-2 opacityによるフェードイン
02-03
図版 02-3 translateによる移動
02-04
図版 02-4 scaleによるズーム
02-05
図版 02-5 rotateによる回転
02-06
図版 02-6 色の変化（color / background-color / border-color）
02-07
図版 02-7 box-shadowによる影の変化
02-08
図版 02-8 blur()によるぼかし
02-09
図版 02-9 形状の変化（border-radius / clip-path）
02-10
図版 02-10 複数プロパティの組み合わせ
02-11
図版 02-11 移動＋透明度（translate + opacity）
02-12
図版 02-12 大きさ＋透明度（scale + opacity）
02-13
図版 02-13 ぼかし＋透明度（blur + opacity）
02-14
図版 02-14 色＋大きさ（background-color + scale）
02-15
図版 02-15 影＋移動（box-shadow + translate）
Introduction-03
動きの種類（パターン）
03-01
図版 03-1 アニメーションは開始状態と終了状態を繋ぐ
03-02
図版 03-2 同じ終了状態でも、開始状態によって印象が変わる
03-03
図版 03-3 durationとdelay
03-04
図版 03-4 アニメーションの時間による印象の違い
03-05
図版 03-5 delayを使った時間差の演出
03-06-01
図版 03-7 一定速度と緩急ありの比較
03-06-02
図版 03-8 代表的な4種類の速度カーブ
03-06-03
図版 03-9 代表的な特殊イージング
03-07
図版 03-11 ページ読み込みをきっかけに動く
03-08
図版 03-12 ユーザーの操作をきっかけに動く
03-09-01
図版 03-13 スクロールをきっかけに動く①（要素が表示されたらフェードイン）
03-09-02
図版 03-13 スクロールをきっかけに動く②（スクロール量に応じて動く・パララックス）
Introduction-04
アニメーションの実装技術
04-01
図版 04-1 CSSだけで作られる代表的なアニメーション
04-02
図版 04-4 transitionは状態の変化をなめらかに繋ぐ
04-03
図版 04-6 animationは節目を定義して動きを再生する
04-04
図版 04-14 サンプルファイルでのイベント確認（addEventListener・style）
04-05-01
図版 04-15 Intersection Observerで画面に入ったことを検知する
04-05-02
図版 04-17 スクロールフェードイン
04-06
図版 04-22 プリセット型ライブラリ：AOS
04-07
図版 04-26 プリセット型ライブラリ：Rellax
04-08
図版 04-29 to / from / fromToの違い
04-09
図版 04-31 timelineは動きを直列に繋ぐ
04-10
図版 04-33 ScrollTrigger（1回だけ再生・scrubでスクロールに連動）
04-11
図版 04-35 SplitText：文字ごとに時間差で動かす
04-12
図版 04-37 CustomEase：独自の緩急を作る
Introduction-05
機能に適した動き
05-01
図版 05-1 アコーディオンの完成形（クリックで開閉するFAQ）
05-02
図版 05-5 Gridの行が伸び縮みする（0fr ⇄ 1fr）
05-03
図版 05-7 ドロワーメニューの完成形（ハンバーガーボタン→ナビ表示）
05-04
図版 05-14 モーダルの完成形（Micromodalで開閉管理、動きはCSSで自作）
Introduction-06
動きの品質と配慮
06-01
図版 06-3 overflowとz-indexが原因の不具合
06-02
図版 06-6 読み込みが終わらないケースの保険（load + setTimeout）
06-03
図版 06-7 注意を引く動き（複数の要素が同時に動く・一つだけ動く）