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

カバの樹

16種類の楽しいスクロールエフェクトを「vue-stroll」で実装する

2019年8月22日

vue-strollとは

 

 

vue-strollは、リストのスクロールにエフェクトを実装するライブラリです。

元々はstroll.jsというGithubスター 4000を超えるライブラリです。

iOSおよびAndroid 4.x用の特別なタッチ対応モードを含むCSS 3D変換をサポートするブラウザーで動作します。

 

インストール

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

npm

npm i vue-stroll -S

CDN

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

 

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

https://github.com/xiaoluoboding/vue-stroll

 

導入手順

リストのスクロールにエフェクトを実装します。

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

(1)webpack等の場合 ※モジュール版は未検証です。

import VueStroll from 'vue-stroll'

(2)WEBページの場合

const VueStroll = window['vue-stroll'];

2.メソッドを設定

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 }
});

3. <vue-stroll>テンプレートを準備

<div id="app">
  <div v-for="effect in effects">
    <h3>{{effect}}</h3>  
    <vue-stroll :el="el" :collection="items" :effect="effect"></vue-stroll>
  </div>  
</div>

 

サンプル

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

 

エフェクトの種類

  • cards
  • grow
  • flipfly
  • fly-simplified
  • fly-reverse
  • skew
  • helix
  • wave
  • fan
  • tilt
  • curl
  • papercut
  • zipper
  • fade
  • twirl

 

さいごに

リストのスクロールにエフェクトを実装するライブラリでした。

 

今日はこの辺でー

 

  • B!