GSAP Web制作 JavaScript

【GSAP】ScrollTrigerのtoggleClassでクラスの付け外しをする方法

※ 当サイトではアフィリエイト広告を利用しています

GSAPでスクロールしていったら要素にクラスを付けることって出来る?

GSAPではScrollTrigerというプラグインを使えば、スクロールして画面内に入ったらアニメーションを開始させることが出来ます。

そのタイミングでtoggleClassというメソッドを使うとクラスの付け外しが出来ます。

jQueryでもtoggleClassはあり、それについては以下の記事を参照下さい。

あわせて読みたい
【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法
【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法

続きを見る

またGSAPを使ったことがないという人は以下の記事を参照下さい。

あわせて読みたい
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説

続きを見る

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

5大無料特典2023年12月31日まで!

販売ページとレビューを見てみる

GSAPのScrollTrigerでtoggleClassを使ってクラスの付け外しをする方法

それでは早速解説していきますが、今回はScrollTrigerというプラグインを使うので使ったことがない人は以下の記事を参照下さい。

あわせて読みたい
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介

続きを見る

それではまずこちらのサンプルをゆっくりスクロールして下さい。

See the Pen
GSAP(ScrollTrigger・toggleActions)
by junpei (@junpei-sugiyama)
on CodePen.

startscroller-startに到達したら青いボックスが右に移動します。

そしてスクロールを戻すとボックスも左に戻ります。

コードは上記の左上のHTML・CSS・JSをクリックして確認できますが、重要なHTMLとJavaScriptはこちらになります。

<div class="container">
  <div class="box"></div>
</div>
gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    toggleActions: "play none none reverse", // 上スクロールで戻る
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    markers: true, // マーカー表示
  },
});

そして本題のtoggleClassを使ってクラスの付け外しをする方法ですが、コードはこちらになります。

gsap.to(".box", {
  x: 100, // 100px右に移動
  scrollTrigger: {
    toggleActions: "play none none reverse", // 上スクロールで戻る
    trigger: ".box", // アニメーションが始まるトリガーとなる要素
    start: "top center", // アニメーションが始まる位置
    markers: true, // マーカー表示
    toggleClass: {
      targets: ".box", // クラスを切り替える対象の要素
      className: "active", // クラス名 "active" を切り替える
    },
  },
});

追記されたのはこの部分ですね。

toggleClass: {
  targets: ".box", // クラスを切り替える対象の要素
  className: "active", // クラス名 "active" を切り替える
},

これは.boxの要素がスクロールしてアニメーションが始まる位置に到達したら.activeを切り替える、という意味になります。

CSSはこちらです。

.active {
  background-color: red;
}

HTMLはそのままで.activeは付いていません。

<div class="container">
  <div class="box"></div>
</div>

この状態でスクロールして.activeが付与されたらボックスの背景色は変わるということです。

そしてトグルスイッチなので、スクロールを戻したら.activeは外れて背景色も戻ります。

こちらがサンプルです。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はGSAPのプラグインScrollTrigerを使い、toggleClassメソッドでクラスの付け外しをする方法を解説しました。

今回のように背景色を変えるだけならこれを使わなくても大丈夫ですが、こういうことも出来るというのは知っておいて損はないかと思います。

以上になります。

 

Web制作におすすめの教材と案件獲得サービス!
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-GSAP, Web制作, JavaScript