CSS3 для веб-дизайнеров

Особенная техника прокрутки в компьютерной графике, впервые появившаяся в аркаде 1982 года Moon Patrol. В этой псевдотрехмерной технике «камера» двигает фоновые изображения медленнее, чем изображения на переднем плане. Так в двухмерной графике создается иллюзия глубины и погружения. Техника основана на многоплановых камерах, которые используются в традиционной анимации с 1940-х годов.[12]

В последние годы появилось много великолепных примеров того, как параллакс используется на вебе. Один из моих любимых – сайт Silverback (http://silverbackapp.com), удобное приложение для юзабилити-тестирования от ребят из Clearleft (рис. 5.02).

^{Рис. 5.02. Измените размер окна браузера на сайте Silverback и насладитесь трехмерным пользовательским опытом}

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

Разумеется, не все увидят это – но те, кто испытает это, увидят замечательную особенность и улучшенный пользовательский опыт: он не может не сделать зрителя чуточку более счастливым.

Старый способ: дополнительная разметка

Как это сделать? В начале 2008 года в статье для Think Vitamin Пол Аннетт написал о приемах, которые он использовал для создания эффекта параллакса именно на сайте Silverback (http://bkaprt.com/css3/10/)[13].

Чтобы наслоить отдельные PNG одну поверх другой, нужно создать как минимум три доступных элемента блочного уровня. Требуется два дополнительных оберточных слоя, чтобы расположить фоновое изображение на элементах body, #midground, #foreground.

Разметка будет выглядеть приблизительно так: