javascript - 滚动条上的水平移动

Question

完全重现这种效果的最佳方式是什么？

https://www.youtube.com/embed/Q9_hg7osQ9w

到目前为止，我能够移动顶线，但我发现很难(如果不是不可能的话)将其与底线和淡入淡出的动画结合起来。

这是我到目前为止想出的:

var window_width = $(window).width() - $('.top-line').width();

var document_height = $(document).height() - $(window).height();

$(function () {
    $(window).scroll(function () {
        var scroll_position = $(window).scrollTop();
        var object_position_right = window_width * (scroll_position / document_height);
        $('.top-line').css({
            'right': object_position_right
        });
    });
});

Answer 1

你走在正确的轨道上，但我用类似视频中显示的动画制作了一支快速笔:https://codepen.io/adamk22/pen/vVrLYz

JS:

var topTitle = $('.top-title'),
    bottomTitle = $('.bottom-title');

var fadeStart = 10,
    fadeUntil = 200,
    moveSpeed = 2; // Higher = slower


$(window).scroll(function(e) {
    var scrollTop = $(window).scrollTop(),
        opacity = 0,
        topTitlePos = scrollTop / moveSpeed + 'px',
        bottomTitlePos = scrollTop / moveSpeed + 'px';

    if (scrollTop <= fadeStart ) {
        opacity = 1;
    } else if ( scrollTop <= fadeUntil ) {
        opacity = 1 - scrollTop / fadeUntil;
    }

    topTitle.css({'transform': 'translateX(' + topTitlePos + ')', 'opacity': opacity});
    bottomTitle.css({'transform': 'translateX(-' + bottomTitlePos + ')', 'opacity': opacity});
});

显然，根据用例的不同，可能会有更好的书写方式，但希望这支笔至少能帮助您理解它的作用和工作原理。

此外，当使用 js/jquery 对元素进行动画处理时，尽量避免使用 left、right、top 和 等属性底部 由于性能问题。使用 transform 代替，例如转换:translateX(100px);。查看这篇文章了解详情:https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/