東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2018.09.24 Posted by

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

anime

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

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

まずデモページはこちら

■概要

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

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

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

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

■実装方法

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

2. 以下を記述

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

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

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

5.jsを記述する

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

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

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278