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
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 import KsVueFullpage from 'ks-vue-fullpage'
Vue.use(KsVueFullpage)Create a ksvuefp.js files in yur plugins folder, and add it to yout nuxt.config.js files with ssr: false option
ksvuefp.js
import KsVueFullpage from 'ks-vue-fullpage'
Vue.use(KsVueFullpage)nuxt.config.js
{
...
plugins: [{
src: '~/plugins/ksvuefp',
ssr: false
}]
...
} <link rel="stylesheet" href="/dist/ks-vue-fullpage.min.css"></link>
<script src="/dist/ks-vue-fullpage.min.js"></script> 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
} ...
<ksvuefp :options="options" :sections="sections"> // Where options is an object of options, and sections an array containing our sections datas
<ksvuefp-section
class="whatever"
v-for="(s,index) in sections"
:section="s"
:key="s.id"
:section-index="index"
:background-image="'url('+ s.img_url +')'"
:background-color="'#123456'" >
<h2> {{any_data}} </h2>
</ksvuefp-section>
</ksvuefp>
...
<script>
...
data(){
return {
sections: [
{
id: 1,
any_data: "I'm section 1",
img_url: './images/whatever01.jpg'
},
{
id: 2,
any_data: "I'm section 2",
img_url: './images/whatever02.jpg'
},
{
id: 3,
any_data: "I'm section 3",
img_url: './images/whatever03.jpg'
}
],
// See below for a list of default options
options: {
duration: 800,
easing: [1, 0, 0, 1],
loopBottom: true
}
}
}
...
</script>export default {
/**
* Html params
* @property {String} sectionTag - The tag used to wrap each vsvuefp-section component.
*/
sectionTag: 'div',
/**
* Animation params
* @property {String} animationType - Transition effect between 2 screens. Should be one of 'slideY', 'slideX', or 'fade'
* @property {Number} duration - Duration of transition between 2 screens, in ms
* @property {String} easing - Easing of the transition between 2 screens. Can be all easings supported by Velocity, including bezier curves. ex: [0.2, 0.5, 0.2, 0.5]
* @property {Number} animDelay - Content animation delay. Help you define timing between screens transition and content animations
*/
animationType: 'slideY',
duration: 1000,
easing: 'easeInOutQuad',
animDelay: 0,
/**
* Preloading params
* @property {Boolean} preloaderEnabled - Add a fullscreen preloading overlay with loading animation
* @property {String} preloaderBgColor - Background color for the preloader overlay.
* @property {String} preloaderColor - Preloader icon and text color
* @property {String} preloaderText - The text that will appear under the icon animation during loading
* @property {Boolean} waitForBackgrounds - Wait for sections background images to be fully loaded before triggering $ksvuefp-ready event
*/
preloaderEnabled: true,
preloaderBgColor: '#fff',
preloaderColor: '#212121',
preloaderText: 'Loading...',
waitForBackgrounds: true,
/**
* Navigation params
* @property {Boolean} dotNavEnabled - Add a dot navigation
* @property {String} dotNavPosition - Change dotNav position. Should be one of top, bottom, left or right
* @property {String} dotNavColor - Change dotNav color
* @property {Boolean} loopBottom - Go to first section on scroll down while watching last section
* @property {Boolean} loopTop - Go to last section on scroll up while watching first section
*/
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 {Boolean} parallax - Enable parallax effect on section's background
* @property {Float} parallaxOffset - Parallax offset amount, default to 0.5. Should be between 0 and 1. 0 gives no parallax effect, 1 gives a "stacking effect" (the old section remains fixed during transition while the next one slides above it).
*/
overlay: 'rgba(0, 0, 0, 0.2)',
parallax: false,
parallaxOffset: 0.5
}| Name | Data type | Default value | Description |
|---|---|---|---|
| options | object | - | custom options (cf example above) |
| sections | array | - | sections list (cf example above) |
| 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. |
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:
<ul>
<li v-for="(s,index) in sections">
<a href="#" @click.prevent="$ksvuefp.$emit('ksvuefp-nav-click', {nextIndex: index})">
Section {{ index + 1 }} // The first index is 0
</a>
</li>
</ul>- 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
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.