Движущийся фон (многоуровневый скроллинг для ленивых)

Silverback

Напоследок мы совершим «невидимое прикосновение» (привет Филу Коллинзу) к тому, что является своего рода приятным обобщением понятия тонкостей мастерства.

Для кого-то эффект так и останется незамеченным, а у остальных непременно вызовет улыбку… «Многоуровневый скроллинг» фона — простой способ сделать подвижность Сети ее же ин- струментом. Хотя, безусловно, добавление движения к тому, что кажется статичным, требует дополнительных затрат времени.

Партизанская тактика
Я впервые увидел эффект «многоуровневого скроллинга» на сайте компании Clearleft для Silverback (рис. 1) — приятной программы, которая позволяет проводить тестирование юзабилити «не отходя от кассы».

Silverback
http://silverbackapp.com

Хотя это действительно превосходная программа, особое внимание я обратил на то, как выполнен дизайн сайта. В частности, меня поразили растения, нависающие над гориллой: при изменении размера окна браузера становились будто бы трехмерными. Если увеличить или уменьшить ширину окна, три слоя с изображениями растений перемещаются вдоль горизонтальной оси, причем с разной скоростью. А самый верхний слой размыт, что усиливает эффект глубины. Удивительно! И я, наверное, целый час растягивал и сжимал окно, тихонько посмеиваясь.

Совет. Термин «многоуровневый скроллинг» («parallax scrolling») при- шел к нам из аркад 80-х годов, где фоновые изображения двигались медленнее, чем изображения, находящиеся на перед- нем плане. За счет этого в плоской (2D) игре создавался эффект трехмерности. Более подробно об этом можно прочитать на http://en.wikipedia.org/wiki/Parallax_scrolling

Вроде бы невидимые детали
Пространственный эффект при изменении размера окна браузера — это один из лучших примеров тонкого мастерства. Его реализация требует много сил и внимания, однако результат пользователь может так и не заметить. Существенную часть этой книги мы посвятили разговору о мелочах, которые могут различаться в зависимости от браузера, и о том, как важно побороть в себе стремление к однородности дизайна.

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

Silverback
Рис. 1. Программа для тестирования юзабилити Silverback, созданная компанией Clearleft (http://silverbackapp.com). Попробуйте изменить размер окна и следите за тем, как свисающие растения перемещаются с разными скоростями

«Резиновые» сетки, о которых Итан говорил в предыдущей главе, являются еще более экстремальным воплощением этой идеи.

Как это делается
Пол Аннет рассказывает о том, как он создавал эффект «многоуровневости» на сайте Silverback, в статье «Как повторить эффект многоуровневого скроллинга с сайта Silverback» («How to recreate Silverback’s parallax effect» http://carsonified.com/blog/features/howto-recreate-silverbacks-parallax-effect/). Он использовал три слоя PNG-изображений, расположение которых по горизонтали за- дается с помощью различных процентных значений.

Я скажу лишь общие слова по поводу кода: если в качестве значений начального положения трех слоев фона использовать 20%, 40% и 150%, то повторяющиеся по горизонтали слои будут двигаться при изменении ширины окна браузера с разными скоростями.

body {
background: url(../img/vines-back.png)
repeat-x 20% 0;
}
#container {
background: url(../img/vines-middle.png)
repeat-x 40% 0;
}
#container-inner {
background: url(../img/vines-front.png)
repeat-x 150% 0;
}

Это очень хитрый прием; используя его, вы практически не ограничены в выборе слоев, их количества и скоростей, с которыми они двигаются.

Эксперименты с отрицательными процентными значениями
В конце своей статьи Пол говорит о том, что использование отрицательных процентных значений приводит к интересному результату. И здесь он вспоминает сайт The Rissington Podcast (http://therissingtonpodcast.co.uk/), уже упоминавшийся ранее статье, который тоже может похвастаться эффектом «многоуровневого скроллинга». Ранее подобный метод использовался на странице с все начинается с регистрацией доменов.

Если использовать отрицательные значения, то изображения будут двигаться влево, то есть часто не в том направлении, в котором меняется размер окна (если вы возьметесь за правый нижний угол окна и потащите его вправо, изображения будут двигаться в противоположном направлении). И, как поясняет Пол, чем выше процентное значение (отрицательное), тем быстрее будет двигаться изображение.

Эффект «многоуровневости» для ленивых

Немного упростив метод, описанный Полом Аннетом, я стал использовать отрицательные процентные значения для задания расположения повторяющихся по горизонтали фоновых изображений. Даже в самой простой ситуации, когда всего одно изображение заполняет фон, движение картинки в направлении, противоположном изменению размера окна, создает эффект, похожий на «многоуровневый скроллинг» — только сделать это гораздо проще.

Как это используется в шаблоне Tugboat
К примеру, в шапке шаблона Tugboat есть фоновое изображение, на котором вы можете разглядеть небо, облака и холмы из кофе (рис. 2). Это картинка размером 1024×56 пикселов, которая повторяется по горизонтали, чтобы независимо от величины окна шапка занимала всю его ширину и выглядела как единое целое.

шаблон Tugboat
рис. 2

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

Кроме того, под шапкой мы добавили повторяющееся градиентное изображение (рис. 3). Его цвет меняется от более темного оттенка коричневого (внизу) к более светлому, совпадающему с цветом шапки (вверху).

шаблон Tugboat
рис. 3

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

шаблон Tugboat
рис. 4. Объемная картинка: изображение с облаками/холмами над коричневой шапкой и повторяющееся градиентное изображение под ней

Разметка шапки шаблона Tugboat
Для создания структуры шапки шаблона Tugboat будем использовать такую разметку (в ней мы зададим логотип, слоган, графические элементы и список панели навигации).

 

Обратите внимание на два внешних контейнера, которые обозначены как #header и #header-inner. Это те самые элементы, с помощью которых мы будем добавлять фоновые изображения, а также зададим коричневый цвет фона.

Добавление фоновых изображений
Сначала добавим градиентное изображение, которое должно располагаться вдоль нижнего края шапки и над коричневым фоном. Чтобы аккуратно отделить шапку от светло-коричневого фона страницы, создадим белую границу шириной в 1 пиксел.

#header {
border-bottom: 1px solid #fff;
background: #766557 url(../img/h-bg-bottom.gif)
repeat-x bottom left;
}

Далее добавим повторяющееся по горизонтали изображение облаков и холмов, которое должно располагаться вдоль верхнего края шапки. Для этого зададим его в качестве фона для элемента #header-inner.

#header {
border-bottom: 1px solid #fff;
background: #766557 url(../img/h-bg-bottom.gif)
repeat-x bottom left;
}
#header-inner {
padding: 70px 0 0 0;
background: url(../img/nav-top-clouds.gif)
repeat-x top left;
}

На рисунке 5 показан результат заполнения фона этими изображениями. Такой подход гарантирует нам, что независимо от размера окна браузера облака/холмы и градиент будут занимать всю ширину окна и выглядеть единым целым.

шаблон Tugboat
рис.5. Результат заполнения фона изображениями

Отрицательные процентные значения для изображений, повторяющихся по горизонтали
Теперь вернемся к методу создания эффекта «многоуровневости» для ленивых. Все, что нам нужно, — это задать расположение изображения с облаками/холмами по горизонтали с помощью отрицательных процентных значений (как я уже говорил, чем больше это значение, тем выше скорость, с которой будет двигаться картинка).

#header-inner {
padding: 70px 0 0 0;
background: url(../img/nav-top-clouds.gif)
repeat-x –80% 0;
}

Итак, мы задали начальное положение фонового изображения: 80% по горизонтали и 0 (то же самое, что top) по вертикали. Вот и всё.

Теперь когда пользователи будут менять ширину окна, облака и холмы будут двигаться в противоположном направлении. Мы создали эффект «псевдо-многоуровневости», причем за треть цены!

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

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

У меня есть ощущение, то в мире веб-дизайна происходит множество удивительных вещей. И я надеюсь, что эта книга пробудит в вас желание экспериментировать с чем-нибудь новым и очень интересным — и при этом вы будете помнить о принципах пуленепробиваемости, которые превращают хороший веб-дизайн в первоклассный.

Я надеюсь, вам доставило удовольствие слушать, как Итан и я рассказывали о том, какой принцип является для нас самым важным при разработке любого проекта, а заканчивается вот такими правками в виде CSS и HTML. Значительная часть работы над дизайном — это убеждение себя в том, что вы все делаете правильно. И я надеюсь, что мне удалось помочь вам сделать еще один шаг в этом направлении.

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

Пока!