Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
Post on:2021年3月16日
sponsors
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。
CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。
AnimXYZの特徴
AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。
実装はCSSの外部ファイルとしてだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。
-
- アニメーションの実装が簡単
- アニメーションを作成するのは非常に簡単。例えば、フェードとスケールを組み合わせる場合は、xyz="fade small up"と記述するだけです。
-
- カスタマイズも簡単
- CSSの変数を使って、どんなアニメーションでも思いのままに微調整できます。--xyz-translate-y: 42%;
-
- パフォーマンス
- アニメーションは非常に滑らかに動作します。ファイルサイズは基本機能で2.68kB、ユーティリティを含めると11.4kBです。
-
- 少ないコード
- CSSアニメーションはキーフレームを使わずに、実装できます。煩わしさがない分、楽しさも倍増します。
-
- ネストとスタッガー
- ネストされたアイテムを親と同期してアニメーションさせながら、要素のリストを順または逆方向にずらすことができます。
-
- プラグ＆プレイ
- HTMLとCSSで動作するだけでなく、VueやReactのプラグイン（近日公開予定）を使用することで、さらなるパワーを得ることができます。
AnimXYZのデモ
デモでは、AnimXYZで実装できるさまざまなアニメーションとその実装コードを確認できます。
上部からアニメーションの種類を選択し、さまざまな組み合わせを楽しめます。HTML, Vue, Reactのコードも生成され、コピペで利用できます。
また、ページを表示する時に強調する要素をアニメーションさせたり、グリッドやモーダルやタブなどのデモも楽しめます。
AnimXYZの使い方
AnimXYZのインストール
さまざまなインストール方法が用意されています。
まずは、パッケージマネージャーからのインストール。
|
1 2 3 4 5 |
# with npm npm install @animxyz/core # with yarn yarn add @animxyz/core |
AnimXYZは、Sassのプロジェクトでも簡単に利用できます。
|
1 2 3 4 5 6 7 8 |
// Import the functions/mixins @import '@animxyz/core'; // Add all the core/utilities selectors @include xyz-all; // --- Or for more control and granularity --- @include xyz-core; @include xyz-utilities; |
CSSの外部ファイルとして利用することももちろんできます。
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <title>title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core@0.4.0/dist/animxyz.min.css"> </head> <body> </body> </html> |
VueまたはReactプロジェクトでAnimXYZを使用する場合は、AnimXYZコンポーネントも使用することを強くお勧めします。
|
1 2 3 4 5 |
# with npm npm install @animxyz/vue3 # with yarn yarn add @animxyz/vue3 |
インストール後、VueAnimXYZをプロジェクトにインポートし、プラグインを使用するようにVueインスタンスに指示する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createApp } from 'vue' import VueAnimXyz from '@animxyz/vue3' import '@animxyz/core' // Import css here if you haven't elsewhere import App from './App.vue' // Your entry component const app = createApp(App) app.use(VueAnimXyz) // Mount your Vue instance after using plugins // app.mount(...) |
|
1 |
<script src="https://cdn.jsdelivr.net/npm/@animxyz/vue3@0.4.0/dist/VueAnimXyz.js"></script> |
Vue 2.xやReactは、下記をご覧ください。
sponsors
