【前端工具】【scrolltrigger页面滚动侦测】

页面效果需要在滚动到特定区域进行特定动画？

滚动检测可以用DOM提供的Intersection，但资源耗费太高。

知识点

• scrolltrigger
• DOM Element

使用

1. 安装

npm install @terwanerik/scrolltrigger
复制代码

2. 引入

const trigger = new ScrollTrigger()
复制代码

3. 检测

需求是探测一块区域，并触发动画，所以以<section>为单位。

<template>
    <div ref="home" class="home-container">
        <section>
            <figure><img src="@/assets/home/C.jpg" /></figure>
        </section>
        <section>
            <figure><img src="@/assets/home/M.jpg" /></figure>
        </section>
        <section>
            <figure><img src="@/assets/home/J.jpg" /></figure>
        </section>
        <section>
            <figure><img src="@/assets/home/星.webp" /></figure>
        </section>
    </div>
</template>

<script>
import ScrollTrigger from '@terwanerik/scrolltrigger'

export default {
    data() {
        return {
            trigger: null,
        }
    },
    methods: {
        initAnimation() {
            this.trigger = new ScrollTrigger()
            
            // childNodes查询更快
            this.$refs.home.childNodes.forEach(element => {
                if (element.tagName == 'SECTION') {
                    // 设置触发属性
                    element.setAttribute('data-trigger', '')
                    // 绑定动画到元素
                    element.tween = this.$anime
                        .timeline({
                            autoplay: false,
                            duration: 800,
                            easing: 'easeInSine'
                        })
                        .add({
                            targets: element.querySelector('figure'),
                            opacity: [0, 1],
                            translateX: [10, 0]
                        })
                }
            })
            
            // 触发绑定
            this.trigger.add('[data-trigger]', {
                toggle: {
                    callback: {
                        in: trigger => {
                            trigger.element.tween.play()
                        },
                        out: trigger => {
                            trigger.element.tween.seek(0)
                        }
                    }
                }
            })
        },
    },
    mounted() {
        this.initAnimation()
    }
}
</script>
复制代码