ペンでテキストをハイライトする真似

このコードペンは、Sten Hougaard の作品からインスピレーションを得ています

準備

アニメーションの異なる実装用に 2 つのコンテナを作成しましょう:

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

Adobe Illustrator を使用して SVG を作成しました。その主な機能は、高さが小さく、幅が大きいことです。
svg をヘッダー要素を基準にして配置するため、svg はヘッダー要素の子であることに言及することが重要です。

CSS

コンテナをフレックスボックスに変換して、すべてを中央に適切に配置します。

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline は、svg がそれに依存するため、単純に要素の幅をコンテンツまで縮小するために使用されます

次に、ヘッダーを基準にして svg を配置する必要があります。

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

標準的な方法を使用して、相対要素を親の中心に配置します。 SVG をテキストに合わせて調整するには、min-width と min-height を適用する必要があります。

JavaScriptによるアニメーションロジック

JavaScript で要素をアニメーション化するには、素晴らしい animate(keyframes, options) メソッドを使用できます。

キーフレーム

反復処理するプロパティを与える getDrawingParameters 関数を詳しく見てみましょう。

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

まず、svg メソッド getTotalLength:
を使用して、実際のパスの長さを知る必要があります。

const length = path.getTotalLength();

ここで、計算された長さを使用して描画をシミュレートする必要があります。出発点を定義しましょう。属性 bloodDasharray:
が必要です。

path.style.strokeDasharray = length;

ここでは、1 つのダッシュ (size=length) と 1 つのギャップ (size=length) を交互に使用してパスを描画するようにこの属性に指示します。

長さが必要な次の属性は ストローク-ダッシュオフセット:

path.style.strokeDashoffset = length;

この値は、ダッシュ配列の計算が長さの値によって行われることを示します。また、ダッシュ配列を「ダッシュ長ギャップ長ダッシュ長ギャップ長 ...」に設定しているため、開始パスは空 (ギャップ) になります。

そこで、反復可能なプロパティを配列で定義します。

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

オフセットを使用して、このプロパティに到達する必要がある相対時間を定義します。各イテレーションでの遅延を模倣するように作成されました。

オプション

animate メソッドの 2 番目の引数はオプションです:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

アニメーションを無限の反復と 10 秒の継続時間に設定します。オフセットを覚えていますか? 「アクティブな」アニメーションにはわずか 1.5 秒かかります。

以上がペンでテキストをハイライトする真似の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。