Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.
Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.
Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note
Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.
Немного технической статистики
По информации из Google Chrome:
- общее число запросов: 289;
- размер: 25.98Мб;
- время загрузки на моём ноуте: 1,3 мин;
- число «полезных» картинок: 46 (столько насчитал я);
Принцип работы
Имеем div (#container) со 100% высотой и абсолютным позиционированием, в него вложен div (#frames) с фиксированной шириной. В свою очередь, #frames содержит div'ы со «сценками» со свойством display:hidden.
Каждая сценка содержит div с фотографией(-ями) фона (.frameBG) и несколькими div'ами () фиксированной высоты, покрывающей всю область конкретной фотографии. Высота покрывающих div'ов всегда кратна высоте изображения.
Во время прокрутки изменяется свойство top у #container. При прокрутки вниз, #container уходит вверх.
По мере прокрутки видимая часть div'ов со «сценками» получают display:block, остальные — hidden;
Присутствие покрывающих фотографии div'ов как раз обусловлено необходимостью определения значения свойства display для конкретной сценки. Но как этот механизм работает, до конца я пока не понял.
В любом случае, такой прием мне показался очень любопытным и если будет время, то можно придумать вариации на тему.
Автор: BANTIK
