Если вы еще не видели загадочно крутой
тизер-страницы приложения Silverback, вы должны заценить ее. Горилла была разработана Джоном Хиксом (да! Тот
же сайт с классной
техникой границы тела ). Убедитесь, что вы изменили размер своего браузера при посещении сайта, чтобы увидеть крутой эффект »
параллакса » висящих лоз. Сам сайт был разработан Полом Аннеттом. Пол написал статью о Think Vitamin о
том, как он создал этот эффект параллакса .
Я подумал, что возьму идею объяснить ее чуть более подробно, которая представляет собой немного другое приложение, и предложу скачать для тех, кто заинтересован.
Что такое параллакс?
Вы можете думать о параллаксе движения как о том, что вы видите, когда вы смотрите из движущегося поезда. Кусты прямо вдоль железнодорожных путей проносятся мимо вашего обзора, в то время как выпас скота в поле будет двигаться медленнее вашего обзора, а горы на заднем плане почти не будут двигаться. Параллакс имеет особое отношение к астрономии. Не только потому, что научно-фантастические фильмы постоянно используют этот эффект для создания крутых космических эффектов, но и потому, что мы измеряем, как далеко звезды находятся от нашей солнечной системы.
Несколько фонов с параллаксом
В честь этого удивительного эффекта и его актуальности для науки я создал
Starry Night . Звездная ночь — это эффект полностраничного фона с тремя слоями. При изменении размера окна браузера далекие звезды будут перемещаться лишь немного, в то время как более близкие звезды будут двигаться быстрее. Эффект создается тремя элементами страницы, каждый из которых занимает все окно браузера. Тело («background»), div («midground») и еще один div («foreground»).
<body> <div id="midground"></div> <div id="foreground"></div> </body>
Элемент body по умолчанию заполнит весь экран, но для того, чтобы сделать то же самое, нам нужно стилизовать два других элемента div с абсолютным позиционированием.
body {
background: url(images/background.png) repeat 5% 5%;
}
#midground {
background: url(images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
}
#foreground {
background: url(images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
}
Файлы PNG как для среднего, так и для переднего плана являются альфа-прозрачными, поэтому они будут хорошо лежать друг на друге. Важной частью здесь являются значения%, которые вы видите в атрибуте background. Это контролирует горизонтальное и вертикальное позиционирование, но в контексте этого примера вы можете прочитать это как «как быстро вы хотите, чтобы оно двигалось». Также обратите внимание, что вы можете выйти за пределы 100%, это означает, что он будет двигаться с большей скоростью, чем скорость изменения размера окна браузера.
Стоит отметить, что в настоящее время этот эффект не произойдет ни в IE 6, ни ниже. Между ошибками с PNG и ошибками с абсолютным позиционированием это просто не стоит. В моем примере я использую
условную таблицу стилей для отображения предупреждающего сообщения.
Куда уходит мой контент?
Это будет зависеть от вас, обратите внимание, на моей
странице примера небольшой кусочек контента в верхнем правом углу. Вы могли бы сделать что-то подобное. Помните, что любая область, которую вы строите для размещения контента, должна быть
абсолютно позиционирована и иметь более
высокое значение z-index . В противном случае, абсолютно позиционированный передний и средний план покроет вашу область контента, и вы не сможете ничего выбрать или щелкнуть (если вы вообще это видите).
ПОСМОТРЕТЬ
ПРИМЕР СТРАНИЦЫ] [ЗАГРУЗИТЬ ПРИМЕР]
.ZIP-файл содержит документ Photoshop для звезд.