<template>
    <div class="relative h-screen overflow-hidden">
        <div
            class="absolute top-0 left-0 w-full h-full bg-cover bg-center transition-transform duration-300"
            :style="{ transform: `translateY(${offsetY * 0.5}px)` }"
        >
            <img src="https://cdn.pixabay.com/photo/2023/02/05/17/38/dog-7770069_1280.jpg" alt="Parallax Background" class="w-full h-full object-cover">
        </div>

        <div class="relative z-10 flex items-center justify-center h-full text-white text-4xl font-bold">
            <h1>Vue Parallax Effect</h1>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            offsetY: 0,
        };
    },
    methods: {
        handleScroll() {
            this.offsetY = window.scrollY;
        },
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
    beforeUnmount() {
        window.removeEventListener("scroll", this.handleScroll);
    },
};
</script>

<style scoped>
</style>
