javascript - 基于滚动百分比的 jQuery 动画

Question

我目前正在为两把剑制作动画，当用户滚动超出原始滚动点 0 时它们会交叉。这是我用来执行此操作的代码：

if(sword_static) {
    sword1.css({
        'left': '50.2%',
        'transform': 'rotate(0deg) translateX(-75%)'
    });
    sword2.css({
        'left': '47.35%',
        'transform': 'rotate(0deg) scaleX(-1) translateX(-25%)'
    });
    sword_static = false;
} else if($(window).scrollTop() === 0) {
    sword1.css({
    'left': '46.5%',
    'transform': 'rotate(-45deg) translateX(-50%)'
    });
    sword2.css({
        'left': '48.5%',
        'transform': 'scaleX(-1) rotate(-45deg) translateX(-50%)'
    });
    sword_static = true;
}

这是可行的，但是我想根据用户的滚动百分比为这些剑制作动画。所以当用户滚动时，剑的动画进度是基于用户滚动了多少。我认为使用 jQuery 的“动画”在这里可能很有用。

我目前正在使用以下代码（改编自：https ://stackoverflow.com/a/8028584/9692762 ）来确定用户滚动整个页面的百分比：

var s = $(window).scrollTop(),
    d = $(document).height(),
    c = $(window).height();

var scrollPercent = (s / (d - c)) * 100;

显然，我不能让动画从 0 到 100 的滚动百分比播放，因为此时剑不在屏幕上 - 大约 20% 的滚动应该是动画完全播放并完成的点。

任何建议，将不胜感激。

标签： javascriptjquerycssjquery-animate