视差背景图像为上下而不是左右

Parallax background image for top-bottom and not right-left

本文关键字：左右 上下 背景 图像 视差      更新时间：2023-09-26

我写了一个脚本，改变BG的位置，当你向下滚动，它的工作良好的左和右位置，但我似乎无法达到的语法，将允许我视差背景位置的顶部或底部-而不是右和左。

下面是我的代码: 
function parallax(){
    var scrolled = $(window).scrollTop();
    $('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

css属性background-position有两个值，#horizontal #vertical。参见:http://www.w3.org/wiki/CSS/Properties/background-position

考虑如下内容:

function parallax(){
    var scrolledTop = $(window).scrollTop();
    var scrolledLeft = $(window).scrollLeft();
    $('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

而且，这似乎会在每次调用视差方法时添加滚动事件。要纠正这个错误，您可以尝试:

function parallax(top, left) {
    $('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function
$(document).ready(function() {
    $(window).scroll(function(e) {
        parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
    });
});

这都是错误的，每次使用$(window).scroll()时都要设置一个事件处理程序。你只需要做一次。试试这个。

var scrolledTop,
    scrolledLeft,
    background_position,
    $custom_bg;

function parallax(){
    scrolledTop = window.scrollY,
    scrolledLeft = window.scrollX,
    background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');
    console.log('background_position', background_position);
    $custom_bg.css('background-position', background_position);
}
$(function() {
    $custom_bg = $('section.intro .custombg');

    $(window).on('scroll', parallax);

});

try

function parallax(){
    var scrolled = $(window).scrollTop();
    $('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
    $(window).scroll(function(e){
        parallax();
    });
}

如果你想做更多的视差和改变其他属性，我强烈推荐Skrollr库(https://github.com/Prinzhorn/skrollr)。

当你滚动时，你几乎可以改变任何CSS属性，给你更多的选择，而不仅仅是背景位置或其他东西。它可能比您期望的要多，但它非常轻量级，并且还支持移动设备(如果没有一个开发良好的库，您可能会遇到麻烦)。希望能有所帮助!

例如，如果你想移动背景图像的背景位置，你可以简单地做下面的操作:初始化skrollr(在本例中没有选项，但可以设置一些参数)

    <script type="text/javascript">
    var s = skrollr.init();
    </script>

然后，您可以使用简单的数据标记来告诉Skrollr哪些元素需要花哨，哪些不需要。在您的情况下，您可以模糊地执行如下操作:

(任何你想使用视差的元素)

<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
    WOOOT
</div>

但是，您可以将background-color替换为background-position 

<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px">       </div>

或

<div data-0="background-position: top center" data-700="background-position: bottom center">       </div>

您可以使用任何接受的CSS background-position关键字。

有用:https://github.com/Prinzhorn/skrollr

相关文章：