じゅんぺい

jQueryのクリックイベントについて、click()とon("click")の違いやよく使うクリックイベントをサンプル付きで解説しています。

GSAPでクリックやマウスカーソルのホバーでアニメーションを開始させる方法をサンプル付きで解説。他の記事ではスクロールして画面内に入ったらアニメーション開始させる方法も解説しているので、使い分けができるようになると役に立ちます。

GSAPのプラグインScrollTrigerを使い、toggleClassメソッドでクラスの付け外しをする方法を解説します。スクロールをして指定した場所に到達したらクラスの付け外しをするサンプルのアニメーション付きです。

GSAPを使ったテキストアニメーションで一文字ずつフェードインさせる方法を14種類のサンプル付きでご紹介します。組み合わせは大量にあって全部は紹介しきれないので、ぜひ試してみて下さい。

GSAPのmatchMedia機能を使ったレスポンシブ対応の解説をしています。パソコンとスマホの表示切り替えによるアニメーションのサンプルもあります。コピペで簡単に実装できるので、ぜひ試してみて下さい。

GSAPとプラグインScrollTriggerを使って横スクロールさせる方法をサンプルで解説します。全画面で横スクロール、スクロールを途中で止めたら残りは自動でスクロール、スクロール途中で横スクロールの3種類を解説します。

GSAPを使ったパララックスの実装をサンプルを使って解説します。視差効果という意味のパララックスを実装する方法は色々あり、当ブログでも複数解説しているので、使い分け出来るようになれると便利かと思います。

GSAPを使ってスクロールでふわっとフェードインさせる方法をアニメーションのサンプルで解説します。下から上にフェードインだけでなく、拡大しながらや横からなどいろんなパターンもご紹介しています。

GSAPで時間差で順番にアニメーションさせるプロパティStaggerの使い方をサンプルを使って解説しています。放射線状や無限リピートで繰り返したり、アニメーションを開始する位置を変えたりカスタマイズする方法も解説します。

GSAPのプラグインScrollTriggerの使い方と、スクロールアニメーションのサンプルをご紹介します。スクロールして指定した位置を過ぎるとアニメーションが発火したり、スクロールを戻すとアニメーションも戻ったりさせることも可能です。