ScrollMagic 变量场景实现：多.imgPanel元素滚动动画复用问询

Got it! 你想要让每个.imgPanel区块在滚动进入视图时触发相同动画，同时避免为每个元素重复创建场景逻辑对吧？我们可以通过遍历元素+复用动画模板的方式实现，既保持代码简洁，又能让每个元素独立触发动画。

修改后的代码 #

function scrollMagic() {
  if (!Modernizr.touch) {
    // 初始化ScrollMagic控制器
    var controller = new ScrollMagic.Controller();
    
    // 定义可复用的动画模板，接收单个元素作为参数
    function getPanelAnimation(targetElement) {
      return new TimelineMax()
        .from(targetElement, 1.4, {
          y: '-50px',
          autoAlpha: 0,
          ease: Power1.easeOut
        }, '-=0.2');
    }
    
    // 遍历每个.imgPanel，为其创建专属场景
    $('.imgPanel').each(function() {
      var $currentPanel = $(this);
      // 为当前元素生成动画实例
      var panelAnimation = getPanelAnimation($currentPanel);
      
      // 创建并添加场景到控制器
      new ScrollMagic.Scene({
        triggerElement: this, // 以当前元素作为滚动触发点
        triggerHook: 0.8,    // 调整触发时机：元素顶部到达视图80%位置时启动动画
        reverse: true         // 滚动回退时反向播放动画（可根据需求关闭）
      })
      .setTween(panelAnimation)
      .addTo(controller);
    });
  }
}

关键修改点说明 #

• 复用动画逻辑：把原来的全局动画改成getPanelAnimation函数，每次传入单个.imgPanel元素，确保动画只作用于当前目标，不会一次性触发所有元素的动画
• 遍历创建场景：通过.each()遍历所有.imgPanel，为每个元素生成独立的ScrollMagic场景，每个场景以自身为触发条件
• 精准触发控制：triggerHook参数可以调整动画触发的位置（0=视图顶部，1=视图底部），你可以根据页面布局调整这个值
• 可选反向动画：reverse: true让元素滚出视图时反向播放动画，不需要的话可以设为false

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