gsap和ScrollTrigger搭配完成背景视觉滚动差效果

本文链接：https://blog.csdn.net/qq_45743174/article/details/135840297

// demo.js
const sections = document.querySelectorAll('section');
gsap.registerPlugin(ScrollTrigger); // 注册插件
// registerPlugin 是一个注册插件的方法 用来注册插件
// ScrollTrigger 是一个插件 用来监听滚动事件
// ScrollTrigger.create() 是一个创建监听滚动事件的方法
sections.forEach(section => {
    // gsap 是一个动画库 fromTo 是一个动画方法 用来设置动画的起始状态和结束状态 以及动画的配置 例如动画的时间 缓动函数等 
    // gsap.fromTo(section, { backgroundPositionY: `-${window.innerHeight / 2}px` }, { backgroundPositionY: `${window.innerHeight / 2}px`, ease: 'none', scrollTrigger: { trigger: section, scrub: true } });
    // 意思是 从section的背景图的Y轴位置为 -window.innerHeight / 2 的位置开始动画 到window.innerHeight / 2 的位置结束动画
    // ease: 'none' 意思是动画的缓动函数为线性
    // scrollTrigger: { trigger: section, scrub: true } 意思是当section出现在视口中时触发动画
    // scrub: true 意思是当section在视口中时 滚动页面会触发动画
    // trigger: section 意思是当section出现在视口中时触发动画
    // 
    // registerPlugin
    gsap.fromTo(section, {
        backgroundPositionY: `-${window.innerHeight / 2}px`
    }, { backgroundPositionY: `${window.innerHeight / 2}px`,
        ease: 'none',
        scrollTrigger: {
            trigger: section,
            scrub: true
        }
});

});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   /* 第一个section */
   section{
    background-size: cover;
        background-position: center;
        height: 600px;
        display: flex;
        text-align: center;
   }
    section:nth-child(1){
        background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(2){
        background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    }
    section:nth-child(3){
        background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(4){
        background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(5){
        background-image: url("https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(6){
        background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    }
    section:nth-child(7){
        background-image: url("	https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(8){
        background-image: url("https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&w=600");
    }
    section:nth-child(9){
        background-image: url("	https://images.pexels.com/photos/220182/pexels-photo-220182.jpeg?auto=compress&cs=tinysrgb&w=600"); 
    }
    section:nth-child(10){
        background-image: url("https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
    }
    h1{
        font-size: 120px;
        margin: auto;
        color: rgb(207, 23, 23);
        
    }


</style>

<body>
    <section>
        <h1>1</h1>
    </section>
    <section>
        <h1>2</h1>
    </section>
    <section>
        <h1>3</h1>
    </section>
    <section>
        <h1>4</h1>
    </section>
    <section>
        <h1>5</h1>
    </section>
    <section>
        <h1>6</h1>
    </section>
    <section>
        <h1>7</h1>
    </section>
    <section>
        <h1>8</h1>
    </section>
    <section>
        <h1>9</h1>
    </section>
    <section>
        <h1>10</h1>
    </section>
   
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
    <script src="./demo.js"></script> 
</body>

</html>