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

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

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

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

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

Sponsored Links

Animate.cssを導入しよう

Animate.cssでは、ダウンロードまたはCDNを使って設置することができます。どちらか、お好きな方を導入しましょう。

 

Animate.cssをダウンロード版

まずは、ダウンロードの方法からご紹介します。以下の公式サイトへいき、「Download Animate.css」をクリックしてファイルをダウンロードするか、GitHubからデータをダウンロードします。

Animate.css

 

Animate.css

 

GitHub

 

ダウウンロードしたanimate.cssファイルをhead内で読み込みます。

 

CDN版

Animate.cssでは、CDN版を使って設置することも出来ます。

Animate.css DON

 

Linkhttps://cdnjs.com/libraries/animate.css

 

 

 

ScrollTriggerを導入しよう

次に「ScrollTrigger」を導入していきます。

ScrollTrigger

 

LinkScrollTrigger

 

ScrollTriggerをダウンロード

以下のGitHubサイトにいき、「Download ZIP」をクリックします。

Download ZIP

 

GitHub

 

スクリプトファイルの読み込み

ダウンロードした「ScrollTrigger-master」ZIP ファイルを解凍後、フォルダ内の「ScrollTrigger.min.js」ファイルをHTMLの任意の場所に設置します。

 

HTMLに記述

「Animate.css」と「ScrollTrigger」の準備ができたので、アニメーションさせたい要素のところに以下のような記述をします。

赤字のところを変更することでアニメーションを変えることができます。

data-scroll=”once toggle(.bounce, .invisible) addHeight”

公式サイトでアニメーションの動きを確認することができます。

Animate.css

 

CSSの設定

以下の設定では、アニメーションさせたい要素は非表示(opacity:0;)になっていて、ウィンドウ内に入ったら0.5秒かけて表示します。

 

Sponsored Links

ScrollTriggerのオプション設定

公式サイトで紹介されている以下のスクリプトファイルを読み込むことで、細かなオフセットの設定ができるようになります。

 

 

おわりに

「Animate.css」と「ScrollTrigger」を組み合わせることで、アニメーションをつけることができましたね。また、ScrollTriggerは最小限のコードでスクロールイベントを設定できるのも嬉しいですね。お疲れ様でした。

Sponsored Links