将滚动位置转换为 0 到 3 之间的变量值

Question

我正在尝试重现类似于隧道效果的东西这里。

我需要将滚动位置转换为从 0 开始到 3 结束的值。 这将在不同的项目上每 100vh 发生一次，从 0 到 3 开始，间隔 100vh。

我的函数现在看起来像这样，但计算看起来不正确。

$(window).scroll(function() {

    var scr = $(window).scrollTop();
    var h = window.innerHeight;

    $('.img-container').each(function(i, el) {
       var start = h*i;
       var end = start + h;
       if (scr >= start && scr < end) {

         var percZ = (scr-start)*3/((scr-start)+h);
         $(el).css('transform', 'scale('+percZ+')');

         if (percZ > 3) {
           $(el).css('transform', 'scale(3)');
         }
       }
   });
});

Answer 1

通过重映射函数解决，该函数将滚动位置转换为 0 到 3 的值：

function createRemap(inMin, inMax, outMin, outMax) {
  return function remaper(x) {
      return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
  };
}

var scr = $(window).scrollTop();
  var vh = Math.round(window.innerHeight / 100);
  var h = window.innerHeight;

  $('.img-container').each(function(i, el) {
    var start = h*i;
    var perc = createRemap(start, start + h, 0, 3); 
    if (scr >= start && scr < tunnelEnd) {
      
      $(el).css('transform', 'scale('+perc(scr)+')');

      if (perc(scr) > 3) {
        $(el).css('opacity', 0);
      }

    } else if (scr == 0) {
      $(el).css('opacity', 0);
    } 
  })