GSAPを使ってスクロールして表示されたらテキストに下線（マーカー）を引く

スクロールしてからアニメーションを開始させるには「ScrollTrigger」というGSAPのプラグインを使用する。

GSAPとScrollTriggerをCDNで読み込む

以下のページにアクセスしてGSAPとScrollTriggerを読み込む。
GreenSock | Docs | Installation

  1. CDNのタブを選択
  2. ScrollTriggerにチェックを入れる
  3. コピーアイコンをクリックしてコードをコピー
  4. HTMLファイルのbody閉じタグ手前に貼り付ける

HTML、CSS、JSをそれぞれ記述する

<div class="container">
  <!-- マーカーを引きたい箇所を、spanタグで囲む --> 
  <p class="text">
    テキストサンプル<span class="marker">テキストサンプルテキストサンプル</span>テキストサンプル
  </p>
</div>
/* マーカーのスタイル */
.marker {
  background-image: linear-gradient(90deg, #ff9e9e, #ff9e9e); /* 線の色 */
  background-position: left bottom; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 .5em; /* 線の横幅を0、縦幅を0.5emに */
  padding-bottom: 3px; /* 下線を下にズラす */
  transition: background-size 1.5s; /* 線を伸ばすアニメーション実行時間を指定 */
}
/* マーカーが表示された時のスタイル */
.marker.active {
  background-size: 100% .5em; /* 線の横幅を100%にする */
}

スクロールして画面中央に表示されたら、.markerに.activeが付与される。
そして、background-size: 0;のマーカーがbackground-size: 100%;になり、線が引かれるようになる。
※JavaScriptのファイルはGSAPのCDNより後に読み込むこと。

gsap.to(".marker", {
  scrollTrigger: {
    trigger: ".marker", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    toggleClass: {
      targets: ".marker", // クラスを切り替える対象の要素
      className: "active", // クラス名 "active" を付け外し
    },
    once: true, // 1回のみ動作
  },
});

スクロールを上にするとマーカーは元に戻るが、一度引いたらそのままにしたい場合は、once: trueを追記する。

inserted by FC2 system