I'm currently working on a webpage that needs to have similar functionality to this example. I'm using Nuxt for the project, but I'm encountering challenges in getting the video to expand and shrink in the exact same way.
To demonstrate the issue, I've tried replicating it on StackBlitz here. However, the custom directive isn't behaving as expected. My goal is to achieve a seamless transition when the video enters the view-port.
Here's the code snippet for the custom directive:
export default {
directives: {
inView: {
isLiteral: true,
inserted: (el, binding, _) => {
const isInView = () => {
const rect = el.getBoundingClientRect();
const inView = (rect.width > 0 && rect.height > 0 && rect.top >= 0 &&
(rect.bottom + 100) <= (window.innerHeight || document.documentElement.clientHeight));
if (inView) {
el.classList.add(binding.value);
// window.removeEventListener('scroll', isInView);
} else {
el.classList.remove(binding.value);
}
};
window.addEventListener('scroll', isInView);
isInView();
}
}
}
}