Vue

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-kinesis.umd.min.js"></script>
<div id="app">
  <kinesis-container id="container">
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png'"
        :strength="-10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png'"
        :strength="10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png'"
        :strength="-10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>    
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari08_obasan.png'"
        :strength="10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>   
        <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png'"
        :strength="-10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png'"
        :strength="10"
        type="rotate"
        transform-origin="50% 300%"
        axis="x"
        type="depth"></kinesis-element>
    <kinesis-element 
        tag="img"
        :src="'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png'"
        :strength="-10"
       ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#container {
  text-align: center;
}
#container img{
  width: 80px;
}

Vue

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

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

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