Vue vue-stroll

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-stroll.min.js"></script>
<div id="app">
  <div v-for="effect in effects">
    <h3>{{effect}}</h3>  
    <vue-stroll :el="el" :collection="items" :effect="effect"></vue-stroll>
  </div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

div {
      float: left;
      display: block;
      padding: 15px;
    }
    
    h3 {
      text-align: center;
      font-size: 120%;
    }

Vue

const VueStroll = window['vue-stroll'];
let items =[];
for(let i=0;i<100;i++){
  items.push('item-'+i);
}
let app = new Vue({
  el: '#app',
  data: {
    el: '#app ul',
    effects: ['cards', 'grow', 'flip', 'fly', 'fly-simplified', 'fly-reverse', 'skew', 'helix', 'wave', 'fan', 'tilt', 'curl', 'papercut', 'zipper', 'fade', 'twirl'],
    items: items
  },
  components: { VueStroll }
});