ks-vue-fullpage
A simple, flexible and easy to use Vue plugin to create fullscreen scrolling websites (also known as single page websites or onepage sites). No jQuery needed, pure Vanilla js.
Try it in this fiddle .
- x-axis or y-axis animations
- w/without subtle parallax animations (on both axis)
- multiple events triggered by the plugin on every components, listenable using vm.$ksvuefp
Inspired by the awesome jQuery plugin "FullPage.js" , created by @Alvarotrigo
Getting Started
The plugin only works with 2nd version of Vue.js. Also, you'll need to include Velocity and hammerjs in your bundle (or directly in your html page if you choose the good old script tag method).
npm i --save ks-vue-fullpage
Usage
With Webpack
Vue
With Nuxt
Create a ksvuefp.js files in yur plugins folder, and add it to yout nuxt.config.js files with ssr: false option
ksvuefp.js
Vue
nuxt.config.js
... plugins: src: '~/plugins/ksvuefp' ssr: false ...
With a script tag
Ks-vue-fullpage registers 2 new components:
- "ksvuefp", which is the wrapper for our sections
- "ksvuefp-section", which is the single section wrapper you'll use with v-for
and add $ksvuefp property to every components, available at vm.$ksvuefp
vm.$ksvuefp returns the following datas object
options: // Default options (see below) merged with your prop options fpLoaded: false // true when the plugin and his components are totally loaded currentIndex: 0 // the index currently shown slidingActive: false // true if sections transition is occuring sliderDirection: 'down' // one of 'up' or 'down' wWidth: 0 // Integer. current screen width wHeight: 0 // Integer. current screen height
Example code
... // Where options is an object of options, and sections an array containing our sections datas {{any_data}} ...
Default options
/** * Html params * @property */ sectionTag: 'div' /** * Animation params * @property * @property * @property * @property */ animationType: 'slideY' duration: 1000 easing: 'easeInOutQuad' animDelay: 0 /** * Preloading params * @property * @property * @property * @property * @property */ preloaderEnabled: true preloaderBgColor: '#fff' preloaderColor: '#212121' preloaderText: 'Loading...' waitForBackgrounds: true /** * Navigation params * @property * @property * @property * @property * @property */ dotNavEnabled: true dotNavPosition: 'right' dotNavColor: '#fff' loopBottom: false loopTop: false /** * Design params * @property {Boolean - String} overlay - Insert a fullsize div between background and content, and set its background property. Must be a valid css background rule * @property * @property */ overlay: 'rgba(0, 0, 0, 0.2)' parallax: false parallaxOffset: 05
Available Properties
ksvuefp component
Name | Data type | Default value | Description |
---|---|---|---|
options | object | - | custom options (cf example above) |
sections | array | - | sections list (cf example above) |
ksvuefp-section component
Name | Data type | Default value | Description |
---|---|---|---|
section | object, string | - | the single section datas issued from v-for loop (cf example above) |
key | int | - | A unique identifier for this item |
section-index | int | - | must be the section's index issued from v-for loop (cf example above) |
background-image | string | - | must be a valid css background rule. |
background-color | string | - | must be a valid css background rule. |
Available Events
You can listen to this events on all components using vm.$ksvuefp.$on :
Name | Datas | Description |
---|---|---|
ksvuefp-ready | - | Triggered when the plugin is fully loaded |
ksvuefp-change-begin | nextIndex, oldIndex, direction | Triggered when the animation between 2 sections begins |
ksvuefp-change-done | - | Triggered when the animation between 2 sections finishes |
ksvuefp-resized | - | Triggered on window.resize |
You can emit this event from all components using vm.$ksvuefp.$emit :
Name | Datas | Description |
---|---|---|
ksvuefp-nav-click | nextIndex | Changes the current index to nextIndex |
For example, if you want to create a custom navigation:
Section {{ index + 1 }} // The first index is 0
Remaining tasks
- Add parallax effect on both axis
- Make it Nuxt compatible
- Create demos (in progress)
- Add delay option, to enable content animations before sliding
- Add better responsive features
Contribution
I'm just a lowly frontend developer trying to master ES6, so suggestions are more than welcome, not only for feature requests but also for coding style improvements.