1本の線がページを右に左にクネクネと降りていきます。
スクロールを戻すと線も引き返します。ホバー不要なのでスマホでも同じ体験。
SNSや検索であなたを見つけた瞬間。線はまだ細く、頼りない。ここからつながりが始まります。
プロフィールを読み、投稿をさかのぼる。人となりが見えてくると、線は少しずつ濃くなります。
「この人にお願いしたいかも」。理屈より先に、気持ちが動く瞬間があります。
実績や声を確かめて、不安が消えていく。線はもう迷いなく、まっすぐこちらへ。
SVGのパス(1本の曲線)をページ全体にあらかじめ敷いておき、stroke-dasharrayという 「破線の技法」で見える長さだけをスクロールに合わせて増減させています。
各カードの位置からS字カーブを自動生成し、「画面のこの高さまで線を描く」をスクロールごとに逆算(長さ→座標の対応表を事前計算)。先端の光る点はgetPointAtLengthで取得しています。
ストーリーページ、沿革、サービスの流れ、採用サイトの1日密着など「順番に読ませたい」コンテンツに。線が道しるべになり、読了率が上がります。スクロール駆動なのでスマホでも同じ動きです。
SVG+素のJSのみ。線の太さは右下のスライダーでリアルタイムに変更できます(CSSのstroke-width)。色はグラデーション定義を差し替えるだけ。カードの位置を変えれば線も自動で追従します。