目次

Animistaのサイトにアクセス

以下のURLよりサイトにアクセスします。
http://animista.net/

フロントーページからきれいなアニメーションでお出迎えしてくれます。
『TRY ME!』ボタンを押して先に進みましょう。

 

アニメーションを作ってみる

英語ですがサイトの構成はとても直感的でわかり易いです。
ヘッダーメニュー(黒帯の部分)から、ベーシック、テキスト、背景画像などのアニメーションの分類を選択します。
その下のセクションではアニメーション種類を選択します。選択した瞬間にプレビューも表示されますので、気に入ったものを選んだらOPTIONの項目から更に細かい動きを設定していきます。
調整が終わったら、画面右端中央あたりに表示されている『Generate code』のボタンを押すとコードが生成されます。

2017年3月時点でまだBETA版のようですが、十分すぎる機能に感動です。

サイトのデザインが「なんか物足りない」と感じた時は、ちょっとしたアクセントでCSSアニメーションを使ってみましょう。ちょっとだけリッチな雰囲気を演出できるはずです!

この記事をシェア