ひと筆で画面が開く、ブラシストロークのオープニング

IXcode®

Freelance coding partner
Okayama, JP

Coding partner for studios & designers

We turn your design into clean, fast, working code — from static pages to WordPress.

Scroll

( How it opens )

  1. 01

    Cover

    One thick line, coiled into a spiral that reaches past every edge, paints the whole screen before a single pixel of the page is visible.

  2. 02

    Retract

    The line unwinds from its outer end and thins as it goes. Gaps open between the loops and the page shows through.

  3. 03

    Reveal

    Before the last stroke has gone, the headline rises letter by letter. Overlapping the two motions makes them feel like one.

← ブログ一覧へ

ひと筆で画面が開く、ブラシストロークのオープニング

要点

  • 1 本の太い線（SVG の path）で画面を覆い、描き戻して中身を見せる
  • pathLength="1" で長さを 1 に正規化し、アニメーションは CSS だけで書く
  • 動きの速さは、測った値から決めた cubic-bezier で合わせる

仕組み

  1. 覆う線：外側から中心へ巻いて、中心で不規則なループを描き、画面の外へ抜ける 1 本の線です。画面の 130% に広げて置き、端は丸く（筆先）。
  2. 描き戻す：外側の端から巻き戻すように消します（stroke-dasharray と stroke-dashoffset）。尾は、だんだん速く消えます。
  3. 同時に細くする：stroke-width も細くして、線と線のすき間から、下の画面を見せます。
  4. 文字を重ねる：線が消え終わる前から、見出しを 1 文字ずつ下から押し上げます。

線を描き戻す部分

.brush path {
  stroke: #1f9c81;
  stroke-width: 300px;
  stroke-linecap: round;   /* 線の端を丸くして、筆先のようにする */
  stroke-dasharray: 1 2;   /* 線 1（全体）、すき間 2 */
  stroke-dashoffset: 0;    /* 最初は、全体が見えている */
}

.is-run .brush path {
  /* 約 2 秒。始めと終わりはゆっくり、真ん中が速い（動きを点で測って合わせた値） */
  animation: retract 2s 0.5s cubic-bezier(0.5, 0.15, 0.45, 0.95) forwards;
}

@keyframes retract {
  to {
    stroke-dashoffset: -1.02;  /* -1 ちょうどだと、丸い端の点が残るので、少し超える */
    stroke-width: 50px;        /* 同時に、線を細くする */
  }
}

stroke-dashoffset を -1 より先へ動かすと、線が全部消えます。約 2 秒で、始めと終わりがゆっくり、真ん中が速い動きです。イージングは、動きの「時間 → 進んだ割合」を何点か測って、いちばん近い値を探しました。

英字をモダンに見せる

  • 字間を詰める：letter-spacing を -0.05em 前後、行間は 1 より小さく。
  • 2 行目は輪郭だけ：color: transparent と -webkit-text-stroke。
  • 小さな文字は、淡い色と広い字間：大きな見出しとの強弱が出ます。

こだわり・気をつけたこと

  • 最初から覆われた状態にします。JavaScript を待たず、CSS だけで覆って始めるので、読み込み中に中身が見えません。
  • どの画面の比率でも、すき間なく覆えるか、数値で確かめました。横長・縦長・正方形・超ワイドで、線の太さと間隔を、描画の結果から計算しています。
  • 覆っている間は、スクロールさせません。
  • 動きを減らす設定には、線を出さず、すぐに内容を見せます。
  • 見出しを 1 文字ずつに分けても、読み上げは変わりません。aria-label を付け、分けた文字は読み上げから外します。

外部ライブラリは使いません。英字フォント（Space Grotesk）だけを、Google Fonts から読み込んでいます。