苹果官网，文字随滚动条淡入淡出效果

 

 

 

<template>

    <div class="box">

        <div class="sticky">

            <h1 class="text" ref="h1">

                less bezel, more screen

            </h1>

        </div>

    </div>

</template>

<script>

// import nav from "@/component/nav/index.vue";

export default {

    mounted() {

        window.addEventListener('scroll', this.pagesScroll)

    },

    unmounted() {

        window.removeEventListener('scroll', this.pagesScroll)

    },

    methods: {

        pagesScroll() {

            let h1 = this.$refs.h1;

            let scrollTop = document.documentElement.scrollTop;

            let scrollHeight = document.documentElement.scrollHeight;

            let clientHeight = document.documentElement.clientHeight;

            let scrolled = scrollTop / (scrollHeight - clientHeight);

            h1.style.setProperty('--percentage', `${scrolled * 100}%`)

        }

       

    },

    // components: {

    //     "my-nav": nav

    // },

}

</script>

<style scoped lang="scss">

:root{

    --percentage: 0%;

}

.box{

    height: 300vh;

    background-color: #000;

}

.sticky{

    position: sticky;

    top: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

.text{

    // color: #fff;

    font-size: 100px;

    font-weight: 600;

    background-image: linear-gradient(75deg, rgba(255,255,255, 1) 0%, rgba(255,255,255, 1) 33.33%,

                        rgba(255,255,255,0) 66.67%, rgba(255,255,255,0) 100%);

    background-size: 300%, 100%;

    background-position-x: calc(100% - var(--percentage));

    background-clip: text;

    -webkit-background-clip: text;

    color: transparent;

}

</style>