アニメーション（CSS、JS、SVG使い分け）
公開日2020.12.18
更新日2021.04.16
画像や文字を変形させたり、アニメーションをつけたりするとき、
CSS、JS、SVGなどどう使い分けるのか、分かりやすくまとめているサイト。
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと
【変形】
・直線的な変形で表現できるなら → CSS
・ベジェ曲線でパスを曲げたいなら → SVG
・複雑な図形や画像を曲げたいなら → Canvas（WebGL）
【移動】
・直線移動・円周移動の組み合わせなら → CSS
・自由なパス（ベジェ曲線）に沿って動かしたいなら → SVG
・移動の軌跡を描く等、前フレームの描画結果を使いたいなら → Canvas（WebGL）
【エフェクト】
・色の変化とブラー・影だけで実現できるなら → CSS
・ノイズや照明など、CSSでは足りない表現を使いたければ → SVG
・CSSやSVGの用意されたフィルターで満足できなければ → Canvas（WebGL）
- 【更新履歴】
- 2021.04.15 記事を公開しました。
- 最新記事
-
タグマネージャーの設定（随時更新）
2021.11.09 WEB・APPSEO対策
mori -
メルマガの開封・クリックをGoogleアナリティクスで測定する方法
2021.10.19 WEB・APPテクニックSEO対策
mori -
横スクロールサイトがかっこいいサイト
2021.10.18 WEB・APPテクニックアイデア
mori
- タグ
- UX・UIデザインバックエンドフロントエンドECサイトサーバー・ドメインSNSツールPHPSEOWebツールnoteJavaScriptGoogleTagManagerGitFacebookショップサーブオウンドメディアCSSSearchConsoleVScodeInstagramお名前ドットコムカラーミーCMSHTMLGoogleAnalyticsXDプログラム言語TwitterhetemlEC-CUBEWordPress操作方法アプリ画像関係PythonVBAデータベースMySQLRubyShopify
- 月別アーカイブ
-