Ks Vue fullpage demo

by Romain Pouchol

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ks-vue-fullpage"></script>
<script src="https://unpkg.com/velocity-animate"></script>
<script src="https://unpkg.com/hammerjs"></script>
<link rel="stylesheet" href="https://unpkg.com/ks-vue-fullpage/dist/ks-vue-fullpage.min.css">
<div id="app">
  <!-- our main component -->
  <ksvuefp :options="options" :sections="sections">
    <!-- our section component -->
    <ksvuefp-section v-for="(section,index) in sections" :section="section" :key="section.bgColor" :section-index="index" :background-color="section.bgColor">
      <!-- Use Vue-ish way for content animations and transitions. Using !$ksvuefp.slidingActive in v-show will result in content waiting for transitions between sections to finish before animating in -->
      <transition name="fade">
        <h2 v-show="$ksvuefp.canAnimContent(index, true)"> 
          {{ section.content }}
        </h2>
      </transition>    
    </ksvuefp-section>
  </ksvuefp>
</div>

SCSS

body {
  margin: 0;
}
.ksvuefp-section {
  display: flex;
  justify-content: center;
  align-items: center;
  h2 {
    text-align: center;
    color: white;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: all .5s;
  opacity: 1;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	sections: [
    	{
      	bgColor: '#ec407a',
        content: 'I am section 1'
      },
      {
      	bgColor: '#42a5f5',
        content: 'I am section 2'
      },
      {
      	bgColor: '#66bb6a',
        content: 'I am section 3'
      }
    ],
    options: {
    	// Your custom options here
      duration: 800,
      overlay: false
    }
  }
})