Question

我有多个以不同角度放置的矩形svg。例如，有些处于直立的垂直位置，有些处于对角线的位置，等等。我试图使这些矩形全部向下滚动到滚动条上的水平位置。这些矩形仅应在视口中可见时才开始旋转到适当位置。当用户滚动到矩形的底部时，他们应该全部向下旋转到水平位置。

因此，例如，如果一个矩形需要旋转90度才能获得水平位置，则旋转应在查看矩形时开始，并且在用户滚动到底部时应完全旋转到位矩形。用户向上滚动时，矩形也应旋转回到原始位置。

我在这里找到了一个相对类似的解决方案：How to rotate an html element with jquery on scroll percentage?，并以此为起点。

以下是我的版本的代码笔：https://codepen.io/becky-lou/full/JVveBb

但是，它并没有按预期工作，我相信这与如何计算bodyHeight和deg有关。我不知如何正确计算滚动滚动的角度。在我当前的示例中，如果您看一下第一个变换：应用的旋转，大多数情况下它的旋转开始都是20度。在您滚动到矩形底部之前，它还会将矩形旋转到最终位置。有谁能够建议我要去哪里错了？

JS的示例，完整代码可在codepen链接上找到

function rotateOnScroll(degree, element, bodyHeight) {
    var deg = ($(window).scrollTop()) * (degree / bodyHeight);
    var shouldScale = $(element).hasClass('upright-left') || $(element).hasClass('upright-right');
    if (deg <= degree) $(element).rotate(deg, shouldScale, 0.86);
    else $(element).rotate(degree, shouldScale, 0.86);
}

var bodyHeight = 0;
var elemHeight = $('.grid-container--problem-solving').height();
window.onscroll = function () {
    if ($(".skill--problem-solving").isInViewport()) {
        if (bodyHeight == 0) bodyHeight = elemHeight + ($('.grid-container--problem-solving').offset().top - $(window).scrollTop());
        rotateOnScroll(90, '.upright', bodyHeight);
        rotateOnScroll(135, '.upright-left', bodyHeight);
        rotateOnScroll(45, '.upright-right', bodyHeight);
    }
};

当元素在视口中时，将元素按滚动量旋转x量

0 个答案: