Как этот эффект изображений создается?
Я посмотрел на эту страницу в течение некоторого времени теперь. Удивительный, действительно. Но я не могу сказать, как эффект фонового изображения, который происходит на орнаментах из завитков. Прошли код, найденный, что они используют JQuery плюс много плагинов прокрутки, но ничто об изображениях, которые я вижу.
Как Вы сказали бы, что это сделано?
2 ответа
Этот трюк довольно прост и требует лишь некоторого CSS, где каждая панель имеет фиксированное фоновое изображение:
<style type="text/css">
div {
height: 100%;
background-image: url(http://sstatic.net/so/img/logo.png);
background-attachment: fixed;
border: thin solid;
}
div.a {
background-repeat: repeat-x;
background-color: #FDD;
}
div.b {
background-repeat: repeat-y;
background-color: #DFD;
}
div.c {
background-repeat: no-repeat;
background-color: #DDF;
}
</style>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
Здесь я использую тот же фон изображение, но другой цвет фона и повтор изображения должны показать вам, что это три разных элемента.
Edit Хорошо, похоже, некоторые сомневаются в том, что я пишу. И на самом деле цитируемый сайт использует для этого jQuery. Но только для того, чтобы подогнать изображение к ширине и высоте окна просмотра браузера, поскольку вы пока не можете изменить размер фонового изображения. CSS 3 определяет свойство background-size , но его поддержка по-прежнему является проприетарной с использованием префикса поставщика, например -khtml- (Konqueror), -moz- ] (Браузеры на основе Gecko, такие как Firefox), -o- (Opera) и -webkit- (браузеры на основе WebKit, такие как Safari).
Если вы можете воздержаться от этого, вы можете использовать технику CSS, которую я вам показал.
Это 4 блока с различным фоновым изображением для каждого, что делает эффект особенно эффективным, так это «background-connected: fixed;» свойство, чтобы остановить прокрутку фона.
Если вы загрузите Firebug для Firefox, вы можете проверить div и наблюдать, как CSS заставляет страницу вести себя, и попытаться воспроизвести это для себя.
Действительно красивый эффект, я должен признать: -)