Анимация средствами HTML+CSS+JS — промо-сайт японского Nissan Note

в 14:54, , рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: , , , ,

Может быть, вы уже и видели промо сайт 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


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js