1

试图根据窗口宽度修改 gsap scrollTrigger offset_value 。(window).resize(function()不幸的是，当用户“即时”更改窗口大小时，无法弄清楚如何实现这一点。此函数对offset_value变量没有影响。

这是现在的代码，显然我的方法存在根本性错误：

    gsap.registerPlugin(ScrollTrigger);
    var frame_count  = 37,
    offset_value = 360;
if (window.innerWidth < 980) {
    offset_value = 180;
     }
//This is the part that is not working
jQuery(window).resize(function() {
  if( jQuery(this).width() > 979 ){
    offset_value=360;}
    else {offset_value=180;}
    return offset_value;
});
//END This is the part that is not working

gsap.to(".iis-viewer", {
  backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
  ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
  scrollTrigger: {
    trigger: ".iis-scene",
    start: "top top",
    end: "+=" + (frame_count * offset_value),
    pin: true,
    scrub: true
  }
});
4

1 回答 1

1

这些情况正是 ScrollTrigger 的.matchMedia方法的用途。

您可以像这样设置您在上面尝试执行的操作：

ScrollTrigger.matchMedia({
  // desktop
  "(min-width: 980px)": function() {
    const offset_value = 360;
    gsap.to(".iis-viewer", {
      backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
      ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
      scrollTrigger: {
        trigger: ".iis-scene",
        start: "top top",
        end: "+=" + (frame_count * offset_value),
        pin: true,
        scrub: true
      }
    });
  },
  
  // mobile
  "(max-width: 979px)": function() {
    const offset_value = 180;
    gsap.to(".iis-viewer", {
      backgroundPosition: (-offset_value * frame_count * 2) + "px 50%",
      ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
      scrollTrigger: {
        trigger: ".iis-scene",
        start: "top top",
        end: "+=" + (frame_count * offset_value),
        pin: true,
        scrub: true
      }
    });
  }
});

但是，由于您的用例只是切换了几个值（而不是需要不同的补间/滚动触发器），因此只使用函数值可能更有意义，因为函数值会在 ScrollTrigger 刷新（调整大小时）时更新：

let offset_value;

function updateOffsetValue() {
  offset_value = innerWidth > 979 ? 360 : 180;
}

window.addEventListener("resize", updateOffsetValue);
updateOffsetValue();

gsap.to(".iis-viewer", {
  backgroundPosition: () => (-offset_value * frame_count * 2) + "px 50%",
  ease: "steps(" + frame_count + ")", // use a stepped ease for the sprite sheet
  scrollTrigger: {
    trigger: ".iis-scene",
    start: "top top",
    end: () => "+=" + (frame_count * offset_value),
    pin: true,
    scrub: true
  }
});
于 2020-10-28T20:42:41.637 回答