2026

レスポンシブ対応したoffsetの構築

Next.js

Tailwind CSS

React

SVG

投稿一覧に戻る

シリーズ『isirmt.com v2 制作メモ』

今回のテーマ

今回は，現行のisirmt.com V2のプロフィール欄↓

のオレンジ枠の周りを回る線について述べます．

実装

そもそも，軌跡に沿って動くという仕様ですが

CSSのoffsetによって実現可能です．

<無題>tsx

const ORBIT_COUNT = 20;
const ORBIT_DURATION = 60;

return <>{orbit &&
  Array.from({ length: ORBIT_COUNT }).map((_, orbitIndex) => {
    const delay = -(ORBIT_DURATION * (orbitIndex / ORBIT_COUNT));
    return (
      <span
        key={orbitIndex}
        className="animate-orbit pointer-events-none absolute top-0 left-0 z-0 h-8 w-2 rounded-md bg-[#f7885c] opacity-20 [offset-anchor:0_4rem] [offset-rotate:auto]"
        style={{
          ...orbitStyle,
          animationDelay: `${delay}s`,
          animationDuration: `${ORBIT_DURATION}s`,
        }}
      />
    );
  })
}</>

見ていただいた通り，ORBIT_COUNT個だけ<span />による角丸四角形を配置し，animation-delayで位相をずらしている形になります．

animationのカスタム定義は至ってシンプル

<無題>css

@import "tailwindcss";

@theme inline {
  --animate-orbit: orbit 40s linear infinite;
}

@keyframes orbit {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

(40秒ループの名残は残っていますが)非常にシンプルな定義になってるかと思われます．

これで，パスさえ決まっていれば指定個数で周りをoffset-anchorだけ離れて回り続けるアニメーションが出来上がっています．

残すはorbitStyleですね．

レスポンシブ対応したoffsetの構築

今回のテーマ

実装

関連記事