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

📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.
https://github.com/xiaoluoboding/vue-stroll

awesome css list scroll-effects vue

Last synced: 21 days ago
JSON representation

📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

• Host: GitHub
• URL: https://github.com/xiaoluoboding/vue-stroll
• Owner: xiaoluoboding
• License: mit
• Created: 2016-06-17T14:05:27.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-29T05:25:21.000Z (over 8 years ago)
• Last Synced: 2024-05-02T05:52:24.129Z (over 1 year ago)
• Topics: awesome, css, list, scroll-effects, vue
• Language: Vue
• Homepage: https://xiaoluoboding.github.io/vue-stroll/
• Size: 561 KB
• Stars: 156
• Watchers: 5
• Forks: 19
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-stroll - An Awesome CSS3 list scroll effects component for Vue.js 2.x. (Components & Libraries / UI Utilities)
• awesome-vue-refactor - vue-stroll ★8
• awesome-vue-zh - Vue,漫步 - 一个令人敬畏的CSS3列表滚动效果组件为Vue.js 2.x. (UI实用程序 / 滚动)
• awesome-vue - vue-stroll ★129 - An Awesome CSS3 list scroll effects component for Vue.js 2.x. (UI Utilities / Scroll)
• awesome-vue - vue-stroll - Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. ` 📝 4 years ago` (UI Utilities [🔝](#readme))
• awesome-vuejs - vue-stroll ★8
• awesome-vue - vue-stroll - An Awesome CSS3 list scroll effects component for Vue.js 2.x. (UI Utilities / Scroll)

README

          
# vue-stroll

[![Travis Build Status](https://travis-ci.org/xiaoluoboding/vue-stroll.svg?branch=master)](https://travis-ci.org/xiaoluoboding/vue-stroll)

[![npm](https://img.shields.io/npm/v/vue-stroll.svg?maxAge=2592000&style=flat-square)](https://www.npmjs.com/package/vue-stroll)

![Download](https://img.shields.io/npm/dt/vue-stroll.svg?style=flat-square)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/xiaoluoboding/vue-stroll/master/LICENSE)

[![GitHub stars](https://img.shields.io/github/stars/xiaoluoboding/vue-stroll.svg?style=flat-square)](https://github.com/xiaoluoboding/vue-stroll/stargazers)

Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See [Demo](https://xiaoluoboding.github.io/vue-stroll)

[![NPM](https://nodei.co/npm/vue-stroll.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-stroll/)

# Installation

```bash

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**

```javascript

import VueStroll from 'vue-stroll'

```

**CommonJS**

```javascript

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

```

**script**

```javascript

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

```

# Usage

**script**

```javascript

new Vue({

  el: 'body',

  data: {

    el: '#app ul',

    effect: 'cards',

    collection: [

      'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'

    ]

  },

  components: { VueStroll }

});

```

**html**

```html

```

# 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](https://xiaoluoboding.github.io/vue-stroll) |

# License

MIT