Question

我希望我的网站背景在水平滚动时具有水平（而非垂直）视差效果。我使用以下jQuery代码制作一个垂直滚动的网站;我试图做一些改变让它横向工作，但遗憾的是没有运气。

$(document).ready(function(){
    var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this);
        $(window).scroll(function() {
            var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Answer 1

您需要使用水平位置替换yPos，scrollTop()和.top。例如，您可以使用scrollLeft()代替。

See this previous question

要实现视差，您需要滚动不同的＆＃34;层＆＃34;不同速度的元素。前景元素移动得更快（在相同的时间内移动像素更多），背景移动得更少。

您可以通过以下几种方式实现这一目标 - 使用元素类型的硬编码像素值，乘以某个速度因子等。

上面的代码仅适用于＆＃34;窗口＆＃34;作为一个整体。您需要捕获想要单独滚动的元素。同时也将水平滚动值应用于它们。

Answer 2

有些事情如下：

var parallaxDiv = '';
$(document).ready(function(){
  parallaxDiv = $('#parallaxDiv');
});
$(window).scroll(function () {
  var st = $(window).scrollTop();
  parallaxDiv.css({'background-position-x': 0 + (st*.57 )+"px"});
});

这取决于你是想要改变背景位置还是左/右位置，但这应该有效。

如何实现水平视差滚动？

2 个答案: