Звездная ночь: невероятный 3D параллакс эффект

Если вы еще не видели тайнственный и клевый сайт Silverback, то вам стоит его посетить.

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

Попробуем создать нечто похоже, используя идею Пауля...

Что такое параллакс?

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

Множественные бэкграунды с параллаксом

В честь такого эффекта и была создана «Звездная ночь». Звездная ночь представляет собой бэкграунд на всю страницу, состоящий из трех слоев. При изменении размеров окна браузера звезды поменьше будут двигаться медленно, звезды поближе быстрее. Эффект построен на трех элементах страницы, каждый занимает всю область окна. Body (“background”), DIV (“midground”) и еще один DIV (“foreground”).

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

Два ближних слоя альфа-прозрачные, поэтому они не перекрывают изображение друг друга. Важный момент состоит в значениях процентов свойств background. Проценты контролируют горизонтальное и вертикальное позиционирование, но в контексте этого примера, вы можете читать “как вы хотите, чтобы они двигались”. В дополнение, если вы поставите 100%, это будет значить, что скорость движения объектов будет выше, чем скорость изменения размера окна браузера.

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

Куда делся мой контент?

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