ウェブデザイン

Animate.css × ScrollTriggerでアニメーションをつけてみよう

Animate.css × ScrollTriggerでアニメーションをつけてみようTOP

よく見かけるよになったWebページをスクロールしていくと、画像や文字が横から下から飛び出してくる動きってありますよね。あの動きをサイトにつけたいんだけど、どうしたらできるの?って悩んでいませんか?

Animate.cssとの組み合わせでよく紹介されているのが「wow.js」ですが、wow.jsは商用で利用する場合、有料なんです。なので、無料で使用できる「ScrollTrigger」と「Animate.css」を組み合わせることで、スクロールイベントを設定してWeb初心者でもサイトにアニメーションをつけることができるようになります。

それではさっそく、「Animate.css」と「ScrollTrigger」の設置方法をご紹介します。

続きを読む