Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue.js.
JavaScript Vue HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
lib
src Update v0.4.0 Jun 30, 2016
.babelrc Update v0.1.0 Jun 29, 2016
.editorconfig
.gitignore Update v0.1.0 Jun 29, 2016
.travis.yml
LICENSE
README.md
index.html
package.json
webpack.config.js Update vue-stroll Jun 30, 2016
webpack.config.prod.js

README.md

vue-stroll

Travis Build Status npm Download GitHub license GitHub stars

Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue.js. See Demo

NPM

Installation

npm i vue-stroll -S

CDN

Use this URL for development

https://rawgit.com/xiaoluoboding/vue-stroll/master/dist/vue-stroll.min.js

Use this URL in production

https://cdn.rawgit.com/xiaoluoboding/vue-stroll/master/dist/vue-stroll.min.js

Import

ES6

import VueStroll from 'vue-stroll'

CommonJS

var VueStroll = require('vue-stroll');

script

<script type="text/javascript" src="vue/dist/vue.min.js"></script>
<script type="text/javascript" src="vue-stroll/dist/vue-stroll.min.js"></script>
<script type="text/javascript">
    var VueStroll = window['vue-stroll'];
</script>

Usage

script

new Vue({
  el: 'body',
  data: {
    el: '#app ul',
    effect: 'cards',
    collection: [
      'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'
    ]
  },
  components: { VueStroll }
});

html

<!-- Dynamic props -->
<vue-stroll :el="el" :collection="collection" :effect="effect"></vue-stroll>

Props

Name Type Desc Example
el String The element you will bind "#app ul"
collection Array The list you will render ['One', 'Two', 'Three', 'Four', 'Five']
effect String The awesome effects style wave See Demo

License

MIT