手軽にアニメーションを実装できるanime.js

こんにちは、ウェブラボ技術メモです。

最近、おしゃれなローディング画面が多くなりましたね。

そこで今回は、アニメーションが手軽に実装できる「anime.js」を紹介します。

まずデモページはこちら

■概要

様々なアニメーションが収録されたプラグインです。

種類はこちらをご覧ください。

また、animejsを使った作品がCODEPENで見ることができます。

見てると楽しくなりますよ！

■実装方法

1. まずプラグインをダウンロードします。(anime.min.js)

2. 以下を記述

3. HTMLでアニメーションさせたい要素を記述する。

SVGやテキストなどを動かすとかっこいいかもしれません！

4.cssに要素の色などを記述。

5.jsを記述する

「anime.js」のページで好きな関数を選んで調節する。

様々なアニメーションがあるので迷ってしまいますが、なるべく少ない組み合わせの方がスッキリとかっこいいアニメーションになると思います。

アニメーションの組み合わせのセンスがない私にはかなり難しかったです！

こちらのWebサイトでは素敵なロゴのアニメーションを紹介しているので是非参考にしてくださいね！