便利なのが登場!Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis

Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。

アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。

サイトのキャプチャ

Kinesis
Kinesis -GitHub

vue-kinesisのデモ

vue-kinesisは、インタラクティブなアニメーションを作成するための使いやすいVue.jsのコンポーネントです。デモもたくさん用意されています。

デモのキャプチャ

Kinesis: Examples

アルバムのジャケ写をフォーカスすると、さまざまなアニメーションで動きます。

デモのキャプチャ

Kinesis: Examples

写真画像を見せるためのさまざまなトリックを含んだシンプルなデモです。

デモのキャプチャ

Kinesis: Examples

vue-kinesisはSVGのアニメーションもサポートしています。自転車のホイールなど、細かいところもアニメーションします。

デモのキャプチャ

Kinesis: Examples

自転車のアニメーションからさらに一歩踏み込んだ高度なリギングアニメーション。入れ子になった細かいパーツごとにアニメーションを定義できます。

デモのキャプチャ

Kinesis: Examples

vue-kinesisは、マウスの動き、ジャイロスコープ、オーディオ、スクロールもサポートしています。

vue-kinesisの使い方

vue-kinesisは、Vue.jsアプリケーション用のインタラクティブなアニメーションを作成できるコンポーネントのセットです。

コンポーネントを使用する基本書式は、下記の通り。

コンテナ要素kinesis-containerを用意し、その子としてkinesis-elementを記述します。エフェクトはkinesis-container内で機能します、直接の子である必要はありません。

詳しくは、ドキュメントが用意されています。
上記の各デモごとにコードも掲載されています。

サイトのキャプチャ

Kinesis

sponsors

top of page

©2020 coliss