このプロジェクトは、ウェブアニメーションの最適化について学ぶためのインタラクティブな学習サイトです。RAIL モデルやブラウザのレンダリングパイプラインについて、実際のデモを通じて理解を深めることができます。
- Response（応答性）
- Animation（アニメーション）
- Idle（アイドル時間）
- Load（読み込み）
以下の各ステップをクリックすると、詳細な説明が表示されます：
- Scripting（JavaScript 実行）
- Calculate Style（スタイル計算）
- Layout（レイアウト）
- Paint（描画）
- Rasterize（ラスタライズ）
- Composite Layers（レイヤー合成）
実際のコードで最適化の効果を確認できます：
- 非効率な例：
leftプロパティを使用したアニメーション - 効率的な例：
transformプロパティを使用したアニメーション
- 非効率な例：
widthプロパティを使用したアニメーション - 効率的な例：
transform: scale()を使用したアニメーション
- 非効率な例：
background-colorを使用したアニメーション - 効率的な例：
opacityを使用したアニメーション
- 非効率な例：通常の要素のアニメーション
- 効率的な例：
will-changeプロパティを使用したレイヤー昇格アニメーション
- このリポジトリをクローンまたはダウンロードします
index.htmlをブラウザで開きます- 各セクションのボタンをクリックして、最適化の効果を確認します
- ブラウザの DevTools（特にパフォーマンスパネル）を使用して、レンダリングの様子を観察します
- HTML5
- CSS3（アニメーション、メディアクエリ）
- JavaScript（DOM 操作、イベントハンドリング）
- デスクトップ（768px 以上）
- タブレット・モバイル（768px 以下）
- レンダリングパイプラインのステップが自動的に折り返して表示
- コンテンツの余白を調整
- ボタンの配置を最適化
MIT License