变换 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(...)）。

Transform div and move position on scroll? .scrollTop, .css transform