javascript - 变换 div 并移动滚动位置？ .scrollTop、.css 变换

Question

我正在寻找一种简单的解决方案来将对象从一个地方移动和缩放到另一个地方。

我做了一个JSfiddle用这个代码。问题是我需要它在某个时刻停止变小。所以它有一个最小尺寸，另一个问题是我希望它既缩小又向左移动？我可以用矩阵实现这一点吗？

$(window).scroll(function () {

    $(".fade-on-scroll").css("transform", "scale(" + (1 - $(window).scrollTop() / 700) + ")");

});

提前谢谢您!

Answer 1

您应该预先计算比例。这样您就可以实现限制。

var scale = (1 - $(window).scrollTop() / 700)
if (scale < .2) scale = .2

有关位置，请参阅 translate (MDN) 。您可以在同一行上设置缩放和平移(即 transform:scale(...)translate(...))。