Question

我正在试图弄清楚如何使背景图像滚动比页面内容慢。我不知道它是如何完成的。我正在努力做的事情的完美例子is here

这是用CSS还是jQuery / Javascript完成的？

Answer 1

这是由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";
    });
})();

Answer 2

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

如果您检查网站 here 的脚本代码，您可以找到：

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

实际上，background-position CSS属性在页面滚动时根据页面滚动位置计算Y轴进行修改。如果你对Javascript，jQuery或Mootools有一定的了解，你可以很容易地重现效果。

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

Answer 3

这个适用于高bg图像。

(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 + "%";
        });
})();

在Javascript或CSS中慢滚动背景？

3 个答案: