Параллакс

Параллакс

Если вновь обратиться к сайту-примеру с Луной, можно увидеть, как множественные фоновые изображения используются на элементе body, чтобы создать составное космическое пространство. Вместо одного плоского изображения используются четыре полупрозрачные PNG, поставленные одна поверх другой. Каждой выставлено свое положение по горизонтали, чтобы создать эффект анимации, когда меняется размер окна браузера (рис. 5.01).

^{Рис. 5.01. Фон на сайте– примере с Луной, где четыре PNG совмещены, чтобы создать эффект космоса}

Этот прием быстрой смены слоев обрел название «параллакс», который наши друзья из Википедии определяют так:

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

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

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

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

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

Данный текст является ознакомительным фрагментом.