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>

任何帮助非常感谢！：）

Ĵ

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将是您计算的任何内容;从您的问题如何开始，您希望缩放比例不清楚。如果您希望每个0.1的比例按100px线性增长，例如，您可以这样做：

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

在滚动上缩放div - Javascript

1 个答案: