元の投稿を読む: CSSとJavaScriptでSVGをアニメーション化する方法
SVGタイポグラフィアニメーション
See the Pen CSS Scroll Color Animation by Ion Emil Negoita (@inegoita) on CodePen.
SVG画像に命を吹き込みましょう。このチュートリアルでは、CSSとJavaScriptを使ってSVG画像をアニメーション化する方法を紹介します。CSSアニメーションの基本、SVG要素のアニメーション化、そしてスクロールやクリックによるアニメーションのトリガーについても解説します。上のデモで実際の動作を確認してください。スクロール、クリック、または再生ボタンを押してループ再生することでアニメーションをトリガーできます。
アニメーション用のSVG画像を作成する
SVGアニメーションを始めるには、SVG画像が必要です。 Inkscape、Adobe Illustrator、またはPhotoshopの最新バージョンを使って作成できます。以下のオプションがあります。
- ベクター画像を一から描く
- 写真や画像をSVGに変換する（Photoshopを使って画像をベクター画像に変換する方法のチュートリアルをご覧ください）
- ベクター画像ジェネレーターを使う
MockoFunの無料オンラインツール (テキストインシェイプジェネレーター)を使用します。クールなタイポグラフィSVGデザインを簡単に作成できます。
MockoFunの無料オンラインツールtext in shape generator
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-3.svg %} SVGバージョンをダウンロード {% endcta %}
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-2.svg %} SVGバージョンをダウンロード {% endcta %}
{% cta https://www.coding-dude.com/wp/wp-content/uploads/2025/04/text-in-shape-2.svg %} SVGバージョンをダウンロード {% endcta %}
SVG画像が完成したので、アニメーション化に進みましょう！
CSS で SVG をアニメーション化する
CSS で SVG をアニメーション化するには、HTML ページで SVG をインライン SVG として使用する必要があります。つまり、テキストエディターから SVG 定義をコピーし、HTML に貼り付けます。
SVG を開くと、グループ (<g/> タグ) とパス (<path/> タグ) が表示されます。ここではパスに焦点を当てます。パスがアニメーション化の対象となるためです。
SVG の CSS は HTML と似ていますが、プロパティが異なります。SVG の CSS の入門ガイドをご覧ください。
SVG のカラーアニメーション
SVG 内の 2 つの <path/> 要素 (背景図形と図形内のテキスト) の色をアニメーション化します。 CSS の hsl() 値を使用すると、色の操作が簡単になります。
色を変更するには、彩度と明度はそのままに、色相のみを変更します。これにより、調和のとれた配色が作成されます。
コードは次のとおりです。
const SATURATION = '100%';
const LIGHTNESS = '50%';
currentHue = (newHue % 360 + 360) % 360;
const shapeHue = (180 + currentHue)%360;
const dynamicColor = `hsl(${currentHue}, ${SATURATION}, ${LIGHTNESS})`;
const shapeColor = `hsl(${shapeHue}, ${SATURATION}, ${LIGHTNESS})`
svgTexts.forEach(el => {
el.style.fill = dynamicColor;
});
svgShapes.forEach(el => {
el.style.fill = shapeColor;
});
アニメーションのトリガー
アニメーションをトリガーするには、3つの方法を使用します。
- 再生/一時停止ボタン: 色のサイクルを開始または一時停止します。
- マウスホールド: マウスボタンを押している間、色が変わります。
- マウスホイールスクロール: スクロール時に色が変わります。
詳しく見ていきましょう。
- 再生/一時停止ボタン: タイマーを使用して、100ミリ秒ごとに色の変化をトリガーします。
document.getElementById("playPauseCheckbox").addEventListener('change', event => {
// ...
});
-
マウスホールド: マウスボタンを押している間、
setInterval()を使用して色を変更します。
function handleMouseDown(event){
// ...
}
function handleMouseUp(event){
// ...
}
- マウスホイールスクロール: スクロール時に色を変更します。下にスクロールするたびに色相を15度ずつ増加し、上にスクロールするたびに色相を減少させます。
window.addEventListener('wheel', handleWheel, { passive: true });
// ...
function handleWheel(event) {
// ...
}
これで完了です！これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。
まとめ
これで、シェイプデザインでSVGテキストを作成し、CSSとJSを使ってアニメーションさせる方法が分かりました。これは、ウェブサイトに簡単に組み込める、とても便利なウェブデザインのテクニックです。ご質問があれば、コメント欄にご記入ください。