javascript - 在滚动上缩放 div - Javascript

Question

使用这个现有的代码笔 ( 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 + ')');