Javascript 从右向左淡入背景

在ScrollMagic库的帮助下，我根据滚动位置更改了我的节

三节容器的背景img。此外，我还设法添加了一个覆盖，只有当我在页面的某个部分时才会出现

我现在的问题是，我想动画背景图像如何变化（我想从右到左，保持在中间位置/正如你在代码中看到的那样，背景变化了2次）。我试着用transform:translateY（40px）；
属性，但结果不一致，因为图像不会100%显示在我的屏幕上。此外，我希望我的覆盖从左到右，我很困惑如何

HTML
  <div id="bigSection" class="three-section-container  ">
          <div id="target-overlay" class=" "></div>
            <div  class="sec1  " id="project01"></div>
            <div class="sec2 "  id="project02"></div>
            <div class="sec3" id="project03"></div>
          
        </div>

CSS
.three-section-container{
  position: relative;
background-color: black;
transition: all 3s ease;
background-image: url('../../Assets/Images/graphic/last/poza-augmented-reality.png');
background-repeat: no-repeat;

background-color: black;
background-size: 100% 100vh;
background-attachment: fixed;
 
  
}

.fade-img1{
  transition: all 1s ease;

  background-image: url('../../Assets/Images/graphic/last/poza-augmented-reality.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  // transform: translatey(20px);
  opacity: 1;
 margin: 0;
 z-index: 999;
}

.fade-img2{
 
  background-image: url('../../Assets/Images/graphic/last/2.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  opacity: 1;
  transition: all 1s ease;
 margin: 0;
 z-index: 999;
 
}
.fade-img3{
 
  background-image: url('../../Assets/Images/graphic/last/poza-interior.png');
  background-repeat: no-repeat;
 
  background-color: black;
  background-size: 100% 100vh;
  background-attachment: fixed;
  // transform: translateY(40px);
  opacity: 1;
  transition: all 0.3s ease;
 margin: 0;
 z-index: 999;
}
.sec1, .sec2, .sec3{
  height: 100vh;
}

.overlay {
  transition: 0.3s linear all;
  position: absolute; /* Sit on top of the page content */
  width: 40%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
  z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
}

JS

$(document).ready(function(){
    var controller=new ScrollMagic.Controller()
// build a scene

var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project01',
    duration:"100%"
})
.setClassToggle('#bigSection', 'fade-img1')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)
var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project02',
    duration:"100%"
})
.setClassToggle('#bigSection', 'fade-img2')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)

var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project03',
    duration:"200%"
})
.setClassToggle('#bigSection', 'fade-img3')
.addIndicators({
    name:'fade scene',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)



var ourScene= new ScrollMagic.Scene({
    triggerElement:'#project01',
    // duration:"200%"
})
.setClassToggle('#target-overlay', 'overlay')
.addIndicators({
    name:'overlay',
    colorTRigger:'black',
    indent:200,
    colorStart:'#75c695'
})
.addTo(controller)




})


HTML
CSS
.三节集装箱{
位置：相对位置；
背景色：黑色；
过渡：所有3s轻松；
背景图像：url（'../../Assets/Images/graphic/last/poza augmented reality.png'）；
背景重复：无重复；
背景色：黑色；
背景尺寸：100%100vh；
背景附件：固定；
}
.fade-img1{
过渡：所有的1容易；
背景图像：url（'../../Assets/Images/graphic/last/poza augmented reality.png'）；
背景重复：无重复；
背景色：黑色；
背景尺寸：100%100vh；
背景附件：固定；
//变换：translatey（20px）；
不透明度：1；
保证金：0；
z指数：999；
}
.fade-img2{
背景图像：url（'../../Assets/Images/graphic/last/2.png'）；
背景重复：无重复；
背景色：黑色；
背景尺寸：100%100vh；
背景附件：固定；
不透明度：1；
过渡：所有的1容易；
保证金：0；
z指数：999；
}
.fade-img3{
背景图像：url（'../../Assets/Images/graphic/last/poza interior.png'）；
背景重复：无重复；
背景色：黑色；
背景尺寸：100%100vh；
背景附件：固定；
//变换：translateY（40px）；
不透明度：1；
过渡：所有0.3秒缓解；
保证金：0；
z指数：999；
}
.sec1、.sec2、.sec3{
高度：100vh；
}
.覆盖{
过渡：0.3s线性所有；
位置：绝对；/*位于页面内容顶部*/
宽度：40%；/*全宽（覆盖整页）*/
高度：100%；/*全高（覆盖整页）*/
排名：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.5）；/*带不透明度的黑色背景*/
z-index:999；/*指定堆栈顺序，以防对其他元素使用不同的顺序*/
}
JS
$（文档）.ready（函数（）{
var controller=new ScrollMagic.controller（）
//造景
var ourScene=new ScrollMagic.Scene({
triggerElement:“#项目01”，
持续时间：“100%”
})
.setClassToggle（“#bigSection”、“fade-img1”）
.附加指示器({
名称：'fade scene'，
颜色触发器：'黑色'，
缩进：200，
颜色开始：“#75c695”
})
.addTo（控制器）
var ourScene=new ScrollMagic.Scene({
triggerElement:“#项目02”，
持续时间：“100%”
})
.setClassToggle（“#bigSection”、“fade-img2”）
.附加指示器({
名称：'fade scene'，
颜色触发器：'黑色'，
缩进：200，
颜色开始：“#75c695”
})
.addTo（控制器）
var ourScene=new ScrollMagic.Scene({
triggerElement:“#项目03”，
持续时间：“200%”
})
.setClassToggle（“#bigSection”、“fade-img3”）
.附加指示器({
名称：'fade scene'，
颜色触发器：'黑色'，
缩进：200，
颜色开始：“#75c695”
})
.addTo（控制器）
var ourScene=new ScrollMagic.Scene({
triggerElement:“#项目01”，
//持续时间：“200%”
})
.setClassToggle（“#目标覆盖”、“覆盖”）
.附加指示器({
名称：'overlay'，
颜色触发器：'黑色'，
缩进：200，
颜色开始：“#75c695”
})
.addTo（控制器）
})

欢迎任何帮助。谢谢
我对ScrollMagic API不太熟悉，但我认为这段代码片段可以使动画中涉及的JS和CSS内容稍微清晰一些

事实上，它们中的大多数都可以在不需要外部API的情况下完成，而只需来回触发一个CSS类

希望这对您有所帮助：


让animationDone=false；
window.addEventListener（“滚动”，（）=>{
/*
*如果滚动超过一定数量：
*在这种情况下，我选择半个页面高度（50vh），
*通过将屏幕上的类添加到background2 div，可以触发幻灯片动画。
*否则，如果先前触发了动画并
*您以相反方向滚动：动画向后触发。
*/
如果（window.scrollY>window.innerHeight/2）{
document.getElementsByClassName（“background2”）[0].classList.add（“屏幕上”）；
document.getElementById（“第二页”）.classList.add（“屏幕上”）；
animationDone=true；//我们确保始终知道动画的状态
}else if（animationDone）{
document.getElementsByClassName（“background2”）[0].classList.remove（“屏幕上”）；
document.getElementById（“第二页”）.classList.remove（“屏幕上”）；
animationDone=false；//我们确保始终知道动画的状态
}
}，{被动：真}）
正文{
颜色：白色；
保证金：0；
宽度：100vw；
高度：200vh；/*200vh仅用于演示目的：它允许滚动html正文，即使里面没有任何内容*/
}
#主要内容{
文本对齐：居中；
z指数：99；
位置：绝对位置；
}
#主要内容>*{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#首页{
宽度：100vw；
高度：100vh；
}
#第二页{
宽度：100vw；
高度：100vh；
不透明度：0；/*这使得我们的background2div在隐藏后立即透明*/
transform:translateX（-100vw）；/*这会将背景向左移动100vw（其宽度）*/
转换：1s；/*pa