Эффект параллакса без использования background-attachment: исправлено - PullRequest
Новая
       3

Эффект параллакса без использования background-attachment: исправлено

3 голосов
/ 24 февраля 2012

Поэтому я пытаюсь создать сайт в стиле параллакса, очень похожий на этот. Однако, хотя они используют фоновые изображения с «фиксированным» вложением для эффекта неподвижного изображения, я бы хотел использовать плагин слайдшоу jquery. По сути, как я могу добиться «фиксированного» вложения и положения фона моих изображений, если они содержатся в слайдере? В настоящее время изображения в слайд-шоу просто прокрутить ...

Я рад предоставить примеры кода, которые помогут вам получить дополнительную информацию по пути

Спасибо!

1 Ответ

6 голосов
/ 24 февраля 2012

Примерно так должно работать (просто пример кода [используйте семантический идентификатор]): 

<div id="SlideShowContainer">Slide Show Generates into this div</div>
<div id="AllOtherContentWrapper">All other content goes here</div>

Затем установите css в: 

#SlideShowContainer {
   position: fixed;
   z-index: 0;
   top: 0; right: 0; bottom: 0; left: 0;
}

#AllOtherContentWrapper {
   position: relative; /* this could be absolute depending on application*/
   z-index: 1;
}

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

...