じゅんぺい

jQueryのtoggleClass()メソッドを使ってクラスの付け外しをする方法をサンプルを使って解説します。on("click")だけでは出来ない再クリックで元に戻す実装ができるようになります。

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

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

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

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

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

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

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

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

GSAPというアニメーションを簡単に作れるJavaScriptのライブラリの導入方法と使い方を解説しています。豊富なオプションやプロパティを使ったサンプルもあります。この記事を入門編としてGSAPを使えるようになりましょう。