求助：基于ScrollMagic实现背景图切换及Overlay入场动画

我来帮你搞定这两个动画问题，咱们一步步调整代码，解决之前的全屏失效和动画困惑：

一、修复背景图右到左切换动画（解决图片不全屏问题） #

之前用transform: translateY()导致图片无法占满全屏，是因为你给容器本身加了transform，干扰了背景定位逻辑。正确的思路是把每个背景图做成独立的绝对定位图层，通过控制图层的横向偏移实现滑动，容器本身保持固定尺寸不变。

1. 调整HTML结构 #

给每个背景图新增独立的图层容器，放在#bigSection内部：

<div id="bigSection" class="three-section-container ">
  <div id="target-overlay" class=" "></div>
  <!-- 新增背景图层 -->
  <div class="bg-layer bg-layer-1"></div>
  <div class="bg-layer bg-layer-2"></div>
  <div class="bg-layer bg-layer-3"></div>
  <div class="sec1 " id="project01"></div>
  <div class="sec2 " id="project02"></div>
  <div class="sec3" id="project03"></div>
</div>

2. 更新CSS样式 #

• 让容器作为相对定位的“舞台”，隐藏超出部分
• 每个背景图层绝对定位占满容器，初始状态只有第一个图层在可视区域，其余偏移到右侧
• 通过自定义类控制图层的滑动状态：

.three-section-container{
  position: relative;
  background-color: black;
  overflow: hidden; /* 隐藏滑出容器的图层 */
}

/* 通用背景图层样式 */
.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  background-attachment: fixed;
  transition: transform 1s ease; /* 滑动过渡动画 */
}

/* 初始状态：第一个图层居中，其余在右侧待命 */
.bg-layer-1 {
  background-image: url('../../Assets/Images/graphic/last/poza-augmented-reality.png');
  transform: translateX(0);
}
.bg-layer-2 {
  background-image: url('../../Assets/Images/graphic/last/2.png');
  transform: translateX(100%);
}
.bg-layer-3 {
  background-image: url('../../Assets/Images/graphic/last/poza-interior.png');
  transform: translateX(100%);
}

/* 切换状态：当前图层滑出左侧，下一个图层滑入居中 */
.bigSection--show-2 .bg-layer-1 {
  transform: translateX(-100%);
}
.bigSection--show-2 .bg-layer-2 {
  transform: translateX(0);
}

.bigSection--show-3 .bg-layer-2 {
  transform: translateX(-100%);
}
.bigSection--show-3 .bg-layer-3 {
  transform: translateX(0);
}

/* 保留原有sec样式 */
.sec1, .sec2, .sec3{
  height: 100vh;
}

3. 修改ScrollMagic逻辑 #

把原来的背景切换类改成自定义状态类，精准控制图层滑动：

$(document).ready(function(){
  var controller = new ScrollMagic.Controller()

  // 场景1：停留在第一个背景图
  new ScrollMagic.Scene({
    triggerElement:'#project01',
    duration:"100%"
  })
  .setClassToggle('#bigSection', 'bigSection--show-1')
  .addIndicators({
    name:'bg 1',
    colorTrigger:'black',
    indent:200,
    colorStart:'#75c695'
  })
  .addTo(controller)

  // 场景2：切换到第二个背景图（右到左滑入）
  new ScrollMagic.Scene({
    triggerElement:'#project02',
    duration:"100%"
  })
  .setClassToggle('#bigSection', 'bigSection--show-2')
  .removeClassToggle('#bigSection', 'bigSection--show-1')
  .addIndicators({
    name:'bg 2',
    colorTrigger:'black',
    indent:200,
    colorStart:'#75c695'
  })
  .addTo(controller)

  // 场景3：切换到第三个背景图（右到左滑入）
  new ScrollMagic.Scene({
    triggerElement:'#project03',
    duration:"200%"
  })
  .setClassToggle('#bigSection', 'bigSection--show-3')
  .removeClassToggle('#bigSection', 'bigSection--show-2')
  .addIndicators({
    name:'bg 3',
    colorTrigger:'black',
    indent:200,
    colorStart:'#75c695'
  })
  .addTo(controller)

  // Overlay场景后面单独修改
})

这样切换时，下一张背景图会从右侧平滑滑入，当前图滑出左侧，全程保持图片全屏居中，不会出现变形问题。

二、实现Overlay从左到右的入场动画 #

Overlay的左滑入场可以通过宽度从0过渡到目标值实现，结合ScrollMagic的类切换触发动画：

1. 更新Overlay的CSS样式 #

修改.overlay类，初始宽度为0，添加过渡动画：

.overlay {
  transition: width 0.3s linear; /* 宽度过渡动画 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0; /* 初始隐藏，宽度为0 */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 显示状态：宽度展开到40% */
.overlay--show {
  width: 40%;
}

2. 修改Overlay的ScrollMagic场景 #

把原来的类切换改成自定义的显示类：

// Overlay入场场景
new ScrollMagic.Scene({
  triggerElement:'#project01',
  duration: "100%" // 可设置在project01区域内保持显示
})
.setClassToggle('#target-overlay', 'overlay--show')
.addIndicators({
  name:'overlay',
  colorTrigger:'black',
  indent:200,
  colorStart:'#75c695'
})
.addTo(controller)

这样当滚动到#project01区域时，Overlay会从左到右逐渐展开到40%宽度，滚动离开时会自动收缩回去（如果需要固定显示可以去掉duration）。

额外小提示 #

• 想要更丝滑的动画，可以把transition的ease改成cubic-bezier(0.4, 0, 0.2, 1)这类自定义曲线
• 测试时保留ScrollMagic的指示器，方便调试触发位置
• 如果不需要背景图滑出左侧，也可以改成淡入+滑入的组合动画，调整opacity和transform即可

内容的提问来源于stack exchange，提问作者Obsesie