これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
Post on:2024年7月23日
sponsors
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。
112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。
Animataの特徴
Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。
MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カラーやフォントサイズなどのローレベルのデザインは自由に設定できます。
アニメーション化されたUIコンポーネント
Animataには現在、15のカテゴリに112種類のアニメーション化されたUIコンポーネントが揃っています。すぐに使用しなくても、次のプロジェクトのアイデア探しとして見ておくと役立ちます。
背景のエフェクトには、6種類あります。Blurry blobはアニメーション化されたぼやけた塊の背景です。
他にもカードの背景がアニメーション化された動くグラデーションだったり、グリッドやドットや斜め線を描いた背景があります。
最近増えてきた弁当を模したBento Gridのアニメーションは、3種類。レスポンシブ対応のグリッドとして注目されています。
Eightは8つアイテムを備えたBento Gridで、アニメーション化されています。
Bento grid with eight items - Animata
ボタンのアニメーションは、11種類。定番のアニメーションからちょっと複雑なものまで揃っています。
カードのアニメーションは、8種類。Card Spreadは、ホバーで開き、クリックで広がります。
Flip Cardは、180度回転するアニメーション。水平・上下の両方に対応しています。
カルーセルは、2種類。Expandable Carouselはホバーすると画像が拡大され、詳細が表示されます。
コンテナ関連は、5種類。Cursor Trackerはカーソルの動きを追跡するラッパーコンポーネントです。
Nav Tabsはクリックすると、スムーズなアニメーションでタブが表示されます。
タブのハイライト表示の切り替えも面白いですね。
ヒーローセクションは5種類、ビジターの目を惹きつけるさまざまなアニメーションが揃っています。
Slack's intro screen - Animata
画像にちょっとしたアニメーションを加えると、より効果的な印象を与えられます。
最近はコンテンツを表示する際に、スケルトンを採用するサイトやアプリも増えてきました。
Animated Gradient Textはグラデーションがアニメーションする美しいエフェクトです。テキストのエフェクトは全部で17種類あります。
Animated Gradient Text - Animata
Bento Gridをはじめ、さまざまなシーンで利用できるウィジェット。
Animataの使い方
Animataは依存関係としてインストールする必要はなく、コードをコピペして使用するだけです。ただし、コードに必要な依存関係はインストールする必要があります。詳しくは、下記ページをご覧ください。
Animataの要件は、下記の通りです。
- スタイル設定には、TailwindsCSSが使用されています。
- 一部の複雑なアニメーションにはFramer Motionが必要です。
- 一部のコンポーネントのアイコンには、Lucide（紹介記事）のアイコンが使用されています。もちろん、他のアイコンを使用することができます。
sponsors
