忘れないように記録しとこ

カバの樹

コイツ動くぞ？！的なアニメーションが付けられる「vue-kinesis」

完全版を表示する

vue-kinesisとは

vue-kinesisは、インタラクティブなアニメーションを作成できるコンポーネントライブラリです。

テキストや画像（jpgやSVG）などに、マウスの動きやスクロールに合わせてアニメーションさせたり、audioに合わせてアニメーションさせることもできます。

 

 

環境

Vue 2.6.10
vue-kinesis 1.0.2

 

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm install -i vue-kinesis

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-kinesis@1.0.2/dist/vue-kinesis.umd.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/Aminerman/vue-kinesis

 

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

import { KinesisContainer, KinesisElement} from ‘vue-kinesis’

（2）WEBページの場合

const KinesisContainer = window['vue-kinesis'].KinesisContainer;
const KinesisElement = window['vue-kinesis'].KinesisElement;

2.メソッドを設定

上記で作成したKinesisContainerとKinesisElementをVue.component に取り込みます。

KinesisContainerは、アニメーションのイベントを適用させるエリアのコンポーネントです。
KinesisElementは、アニメーションの要素のコンポーネントです。

Vue.component('kinesis-container', KinesisContainer);
Vue.component('kinesis-element', KinesisElement);

new Vue({
  el: '#app'
});

3. テンプレートを準備

<kinesis-container> を設置します。
これはアニメーションのイベントを取得可能なエリアコンポーネントです。

内部に <kinesis-element> を設定します。
こちらがアニメーションをする要素になります。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <kinesis-container id="container">
    <kinesis-element 
        tag="img"
        :src="'https://dummyimage.com/150x150/fcc/000.png&text=thumb1'"
        :strength="-10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>
    <kinesis-element 
        tag="img"
        :src="'https://dummyimage.com/150x150/fcc/000.png&text=thumb2'"
        :strength="10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>        
  </kinesis-container>
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

インタラクティブなアニメーションを作成できるコンポーネントライブラリでした。

一見難しそうに感じますが、触ってみると意外と簡単です。

管理人も色々触ってみましたが、意外と面白くてハマってしまいました。
サンプル作成の途中に不倫関係みたいな業の深い状況を作成したりしてます（笑

 

今日はこの辺でー

 

  • B!