滚动缩放 div - Javascript

Question

使用这个现有的 codepen (http://codepen.io/anon/pen/fDqdJ)。我想添加另一个语句，即在距页面顶部一定距离处，一个已经动画的 div 然后在移动时改变比例。

在语法和增加滚动上动画 div 的比例方面真的很挣扎。我猜我需要使用 css 转换，但需要一些帮助！

js 示例见下：

var $window = $(window);
var $box = $("#box");

$window.scroll(function() {
    var scrollTop = $window.scrollTop();
    console.log(scrollTop);
    if (scrollTop >= 250 && scrollTop < 400) {
      $box.css({top: -250 + scrollTop});      
    } else if(scrollTop >= 400 && scrollTop < 460) {
      $box.css({left: (10+(scrollTop-400)/2)+"%"})
    } else if(scrollTop >= 460 && scrollTop < 580) {
      $box.css({top: (50+(scrollTop-460)/2)+"%"})
    } else if(scrollTop >= 580 && scrollTop < 620) {
      $box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')');
    }
});   

这里是html结构-

<div class="wrapper">
  <div class="row" id="row1">
  </div>
  <div class="row" id="row2">
    <div id="box"></div>
  </div>
  <div class="row" id="row3">
  </div>
  <div class="row" id="row4">
  </div>
</div>

非常感谢任何帮助！ :)

J

Answer 1

这段代码的问题：

$box.css({transform:scale(1.1)})

...是值不正确。为 CSS 属性设置的值应该是一个字符串。目前，代码正试图在您的 JavaScript 中调用 scale 函数，该函数可能不存在。如果要使用 CSS 函数scale，请将代码替换为：

$box.css({transform: 'scale(1.1)'});

或者更简单地说：

$box.css('transform', 'scale(1.1)');

...然后您将更改 CSS 比例。您可能还想为scale CSS 函数使用动态值。这样做会使字符串动态化：

$box.css('transform', 'scale(' + whateverTheScaleShouldBe + ')');

这个whateverTheScaleShouldBe 将是您的计算结果；从您的问题 如何 中不清楚您希望比例在滚动时发生变化。例如，如果您希望规模按100px 线性增长0.1，您可以这样做：

scaleAmt = 1.0 + (scrollTop / 100);
$box.css('transform', 'scale(' + scaleAmt + ')');