湾曲したパスにテキストを移動します

最近、 The New York Timesは、エリザベスウォーレンと彼女のチームがファンセルフィーに雇用するユニークな方法を詳述した魅力的な記事を特集しました。興味深いことに、写真家が画像をキャプチャするように、これらは伝統的なセルフィーではありません。この記事には、動くテキスト要素が巧妙に組み込まれています。これは、読者がスクロールするときにページに沿って優雅に曲がるフレーズです。この効果がどのように達成されるかを探りましょう。

ビジュアルデモンストレーション：

曲線テキストは、SVGを使用して実装されます。 a<path></path>要素は曲線を定義します<textpath></textpath>このパスに沿ってテキストを配置します。

<svg height="160px" viewbox="0 0 1098.72 89.55" width="100%"><path d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19" fill="transparent"></path><text style="transform:translate3d(0,0,0);" width="100%"><textpath alignment-baseline="top" style="transform:translate3d(0,0,0);" xlink:href="#curve"> *写真は技術的にはセルフィーではありません。</textpath></text></svg>

アニメーションはstartOffset<textpath></textpath>要素。 New York Timesの正確な実装は非公開のままですが、簡素化されたアプローチではJavaScriptを使用してページスクロール位置を追跡し、 startOffsetを動的に調整し、スクロールテキスト効果を作成します。

 const textpath = document.queryselector（ "＃text-path"）;

const h = document.documentlement、 
      b = document.body、
      st = 'scrolltop'、
      sh = 'Scrollheight';

document.addeventlistener（ "scroll"、e => {
  letパーセント=（h [st] || b [st]） /（（h [sh] || b [sh]）-h.clientheight） * 100;
  textPath.SetAttribute（ "StartOffset"、（-percent * 40）1200）
}）;

この湾曲した動くテキストは、視覚的に印象的で記憶に残るデザイン要素を提供します。これは、ウェブ上で頻繁に見られないテクニックであり、特に注目を集めています。

以上が湾曲したパスにテキストを移動しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。