Фоновое изображение CSS, центрированное с помощью Stellar JS

Я устанавливаю фоновое изображение для элемента с помощью Stellar JS и пытаюсь добиться центрированного изображения, которое движется с параллаксом. Однако, когда я пытаюсь использовать стандартный подход, я понимаю, что фоновая позиция обновляется звездным значением, которое затем переопределяет центрирование (я предполагаю, что это то, что переопределяет его). Я создал скрипку, чтобы объяснить ситуацию.

http://jsfiddle.net/captDaylight/wvuQm/1/

Есть ли способ, чтобы изображение оставалось в центре прокрутки?

(стек заставляет меня сопровождать этот пост кодом, хотя в данном случае это несущественно, пример на скрипке довольно прост, поэтому я публикую что-то, чтобы его обойти)

background: url(http://upload.wikimedia.org/wikipedia/commons/e/e5/Seine_wide.jpg) no-repeat center center; 
background-size: auto 100%;

‹> Я читал этот другой сообщение о стеке о фоне- положение, но когда я попытался сделать обновление, мне показалось, что параллакс нарушен.

http://jsfiddle.net/captDaylight/wvuQm/3/


person captDaylight    schedule 10.04.2013    source источник


Ответы (2)


Вам нужно отключить горизонтальный параллакс. Это приведет к тому, что Stellar.js оставит ваше горизонтальное позиционирование фона нетронутым.

В вашем примере обновленный вызов Stellar

$(window).stellar({ horizontalScrolling: false });

Я обновил ваш пример JSFiddle с этим изменением: http://jsfiddle.net/wvuQm/5/

person markdalgleish    schedule 11.04.2013

Удалите следующий css

нижняя граница: 50px;

добавьте следующий скрипт и попробуйте

$(window).stellar({
    scrollProperty: 'transform'
});
person vivek    schedule 10.04.2013
comment
Я обновил его в соответствии с вашими предложениями, но, похоже, это не сработало... jsfiddle.net/ captDaylight/wvuQm/4 Я что-то упустил? - person captDaylight; 10.04.2013