ウェブデザイン

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

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

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

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

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

続きを読む
スポンサーリンク

無料素材 3Dアイコンのまとめ6選【2021年版】

無料素材 3Dアイコンのまとめ

無料で使えるいろんな3Dアイコンを集めてみました!
ネットショップやサイト、ブログなどで活用するといいかも!

ビジネスアイコン無料素材

資料作成/ビジネスアイコン/無料素材/クリップアート
仕事に使える/フリーアイコン/イラスト素材

ビジネスicon無料素材

https://business-icon.com/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

150点以上のビジネス関係の3Dアイコン

働く人のイラスト フリー素材

働く人のイラスト素材

https://working-illustration.com/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

ユニークな3Dアイコンが140点以上

ビジネスピープル 無料イラスト素材

ビジネスピープル無料イラスト素材

https://business-peoples.com/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

3Dアイコンが豊富!300点以上

インターネット/IT関係の無料イラスト素材

インターネット/IT関係の無料イラスト素材

https://internet-illustration.com/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

PNG画像の3Dアイコンが150点以上

フリー素材 ピストグラム

フリー素材ピクトグラム

https://free-pictograms.com/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

ハイクオリティでいろんな表情を思わせる3Dアイコンが340点以上

ICON HOIHOI

ICON HOIHOI

http://iconhoihoi.oops.jp/

商用利用OK 画像加工OK

会員登録なしで簡単ダウンロード

人物・家電・動物・ネットショップなどなど、数えきれないほどの3Dアイコンがいっぱい

まとめ

サイズも豊富、ホントにこれで無料なの?って思わせるハイクオリティなアイコンを集めてみました。

いろんなシーンで使える素材がいっぱあるので、どれを使うか迷ってしまいますね。