Медленный прокрутка фона в Javascript или CSS?

Я пытаюсь выяснить, как сделать прокрутку фонового изображения медленнее, чем содержимое страницы. Я понятия не имел, как это делается. Прекрасный пример того, что я пытаюсь сделать здесь

Это делается в CSS или jQuery/Javascript?

Ответы

Ответ 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";
    });
})();

Ответ 2

Эффект на ссылку, которую вы разместили, выполняется в Javascript с помощью jQuery.

Если вы изучите код script сайта здесь, вы можете найти:

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

Практически свойство CSS background-position изменяется на странице прокрутки, вычисляя ось Y в зависимости от положения прокрутки страницы. Если у вас есть некоторые знания Javascript, jQuery или Mootools, вы можете легко воспроизвести эффект.

Я думаю, что это невозможно сделать, используя только CSS.

Ответ 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 + "%";
        });
})();