便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
Post on:2020年1月8日
sponsors
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。
アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
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アプリケーション用のインタラクティブなアニメーションを作成できるコンポーネントのセットです。
コンポーネントを使用する基本書式は、下記の通り。
|
1 |
npm install -i vue-kinesis |
|
1 |
import { KinesisContainer, KinesisElement} from ‘vue-kinesis’ |
|
1 2 3 4 5 6 7 8 9 |
<kinesis-container>https://coliss.com/wp-admin/post-new.php# Here, you can put <kinesis-element :strength="10"> whatever </kinesis-element> <kinesis-element :strength="20"> content! </kinesis-element> </kinesis-container> |
コンテナ要素kinesis-containerを用意し、その子としてkinesis-elementを記述します。エフェクトはkinesis-container内で機能します、直接の子である必要はありません。
詳しくは、ドキュメントが用意されています。
上記の各デモごとにコードも掲載されています。
sponsors
