javascript - 在我的特定 div 上实现视差效果的简单方法？

Question

我在网上到处寻找教程之类的东西，但我找不到任何有用的东西，也找不到我想要的教程，我对 javascript 不是很熟悉。

我想要关于横幅背景的视差效果:

HTML:

<div class="about-banner">
    <div class="container">
        (Content doesn't really matter)
    </div>
</div>

CSS:

.about-banner {
    height: 500px;
    background-image: url(../images/about-banner.jpg);
    border-top: 20px solid #52cbf5;
    margin: 80px 0 0;
}

关于如何实现它的简单说明!

Answer 1

我为此创建了一个函数，它并非完美无缺，但您可以玩弄逻辑:

jQuery.fn.parallax = function(strength, multiplier) {
    if (typeof multiplier == 'undefined') multiplier = 1;
    var offset = parseInt($(this).data('offset'));
    var split = $(this).data('offset').split(/([^0-9])/);
    var unit = split[split.length - 2];
    if (!offset) offset = 0;
    if ($(window).scrollTop() + $(window).height() >= $(this).offset().top) {
        var newVal = (($(window).scrollTop() * strength / 2000 + offset) * multiplier).toFixed(2);
        $(this).css('background-position', 'center ' + newVal + unit);
        console.log($(this).attr('id') + ' ' + 'center ' + newVal + unit);
    }
}

为了使用它，你需要做这样的事情:

$(window).scroll(function() {
    $('.about-banner').parallax(100, 2);
});

如果您希望它从顶部以外的其他地方开始，您可以添加 data-offset="10px" 或类似的内容。