2025-01-04

テキストのアウトラインが浮かび上がるアニメーション

JavaScriptCSSのみテキスト

テキストのアウトラインが出てくるアニメーションです。

実装のポイント

テキストはSVGの<path>で作っています。FigmaやAdobe illustratorなどでSVGコードは生成できます。個人的にはSVGコードが比較的きれいなFigmaがおすすめです。

アニメーションの仕組みはパスの長さ分の間隔の破線を用意し、パスの長さ分だけオフセットをとることでパスが見えない状態を作ります。その状態からオフセットを0にするアニメーションをすることでパス上を動く線を表現しています。

ポイントとしてパスの長さを知っておく必要があります。下記コード例ではJavaScriptで動的に取得して設定しています。しかし要素が不変であれば、このJavaScriptを1度だけ実行して長さを知ったあと、その値を直接SVGコードに書き込んでしまう方法もとれます。この場合は最終的なコードにはJavaScriptが不要になります。

コード例

<p class="sampleText">
  <svg
    width="116"
    height="44"
    viewBox="0 0 116 44"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="116" height="44" fill="white" />
    <path
      d="M109.203 42.048C106.366 42.048 104.2 41.32 102.707 39.864C101.251 38.3707 100.523 36.2427 100.523 33.48V17.688H96.0989V11.248H98.3389C99.4589 11.248 100.243 10.9867 100.691 10.464C101.139 9.94133 101.363 9.11999 101.363 7.99999V2.90399H108.811V11.248H114.915V17.688H108.811V35.608H114.467V42.048H109.203Z"
      stroke="#363636"
      stroke-width="1"
    />
    <path
      d="M71.8479 42.048H63.2239L73.4719 26.424L63.3919 11.248H72.7999L78.7359 21.16H79.0159L84.8399 11.248H93.5759L83.3279 26.648L93.6319 42.048H84.2239L78.1199 31.744H77.8399L71.8479 42.048Z"
      stroke="#363636"
      stroke-width="1"
    />
    <path
      d="M46.969 42.776C42.377 42.776 38.7743 41.3386 36.161 38.464C33.585 35.552 32.297 31.6133 32.297 26.648C32.297 21.72 33.5663 17.8 36.105 14.888C38.6437 11.976 42.1717 10.52 46.689 10.52C49.8623 10.52 52.513 11.2293 54.641 12.648C56.769 14.0293 58.337 15.9146 59.345 18.304C60.353 20.656 60.857 23.288 60.857 26.2V28.72H40.865V29.28C40.865 31.4826 41.4437 33.2 42.601 34.432C43.7957 35.664 45.5503 36.28 47.865 36.28C49.545 36.28 50.9637 35.944 52.121 35.272C53.3157 34.6 54.473 33.6293 55.593 32.36L59.793 37.4C58.449 39.08 56.657 40.4053 54.417 41.376C52.2143 42.3093 49.7317 42.776 46.969 42.776ZM40.865 23.848H52.289V23.288C52.289 21.2346 51.8037 19.6106 50.833 18.416C49.8997 17.2213 48.5557 16.624 46.801 16.624C45.009 16.624 43.5717 17.24 42.489 18.472C41.4063 19.704 40.865 21.328 40.865 23.344V23.848Z"
      stroke="#363636"
      stroke-width="1"
    />
    <path
      d="M32.248 1V8.56H20.88V42.048H12.368V8.56H1V1H32.248Z"
      stroke="#363636"
      stroke-width="1"
    />
  </svg>
</p>

.sampleCard {
  perspective: 500px;
  touch-action: pinch-zoom;
}

.face {
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  transition: rotate 0.2s var(--ease-out-cubic);
}

const text = document.querySelector(".sampleText");
// SVGのパス要素を取得
const pathList = document.querySelectorAll(".sampleText path");
pathList.forEach((path) => {
  // パスの長さを取得
  const length = path.getTotalLength();
  path.style.strokeDasharray = String(length);
  // パスの長さ分オフセットさせてパスを見えなくする
  path.style.strokeDashoffset = String(length);
});

テキストのアウトラインが浮かび上がるアニメーション

実装のポイント

コード例

HTML

CSS

JavaScript

関連作例