在Javascript或CSS缓慢滚动背景

Slow scrolling background in Javascript or CSS?

本文关键字：滚动 背景 缓慢 CSS Javascript      更新时间：2023-09-26

我想弄清楚如何使背景图像滚动速度比页面内容慢。我完全不知道这是怎么做的。这里有一个很好的例子

这是在CSS或jQuery/Javascript完成?

这是由javascript (jQuery):

(function () {
    var a = document.body,
        e = document.documentElement;
    $(window).unbind("scroll").scroll(function () {
        a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop) / 8) + "px";
    });
})();

您发布的链接的效果是使用jQuery在Javascript中完成的。

如果您检查此处站点的脚本代码，您可以发现:

.style.backgroundPosition="0px "+-(Math.max(e.scrollTop,a.scrollTop)/8)+"px"

实际上，background-position CSS属性是在页面滚动时修改的，根据页面滚动位置计算y轴。如果你有一些Javascript, jQuery或Mootools的知识，你可以很容易地重现效果。

我认为仅仅使用CSS是不可能做到的。

这个适用于高像素的图像。

(function () {
        var body = document.body,
                e = document.documentElement,
                scrollPercent;
        $(window).unbind("scroll").scroll(function () {
            scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
            body.style.backgroundPosition = "0px " + scrollPercent + "%";
        });
})();
相关文章：