Having recently delved into Vue, I am currently tackling a project that involves the Fullpage.js Vue wrapper. While I have successfully implemented the Fullpage functionality, integrating additional features like an animation-on-scroll function has proven to be challenging. I came across this basic animation-on-scroll function in a CodePen example, and attempted to incorporate it into my project without success.
The issue lies in the implementation of the handleScroll() method along with the v-on directive on the h2 element to add a class upon scrolling. Despite defining the necessary template code, which includes conditional classes based on scroll position, the scrolled property fails to update appropriately.
<template>
<full-page ref="fullpage" :options="options" id="fullpage">
<div class="section">
<h3 :class="{'bounceInLeft': scrolled}" v-on="handleScroll" class="animated">{{scrolled}}</h3>
</div>
<div class="section">
<div class="slide">
<h3>Slide 2.1</h3>
</div>
<div class="slide''>
<h3>Slide 2.2</h3>
</div>
<div class="slide">
<h3>Slide 2.3</h3>
</div>
</div>
<div class="section">
<h3> ;Section 3</h3> ;
< ;/div> ;
</full-page>
< /template>To rectify this issue, I defined the Vue instance to include options for the Fullpage component, as well as the scrolling animation methods and the scrolled data property:
// create vue instance w/ fullpage
new Vue({
el: '#app',
data() {
return {
scrolled: false,
options: {
navigation: true,
menu: '#nav-menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
},
}
},
methods: {
handleScroll() {
let obj = document.querySelector('h3');
let {top, bottom} => obj.getBoundingClientRect();
let height = document.documentElement.clientHeight;
this.scrolled = top < height && bottom >0;
}
},
created() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
});
Despite my efforts, the value of the scrolled property remains static at false and doesn't reflect changes during scrolling. Any guidance on how to properly update this value and apply the desired class would be greatly appreciated. Feel free to seek clarification if needed. Thank you!