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

    Может быть, вы уже и видели промо сайт 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 none;
    Присутствие покрывающих фотографии div'ов как раз обусловлено необходимостью определения значения свойства display для конкретной сценки. Но как этот механизм работает, до конца я пока не понял.

    В любом случае, такой прием мне показался очень любопытным и если будет время, то можно придумать вариации на тему.
    Поделиться публикацией

    Комментарии 28

      0
      Весьма забавная реализация.
      Мне кажется, это больше для вау эффекта. Посмотрел пару раз, порадовался и забил.
        +2
        Вот здесь еще нечто подобное thedeepestsite.com/
          0
          красиво, но быстро устаешь :(
          в консоли:
          var ts = setInterval(function(){ $('body').trigger('mousewheel', -100); }, 100); // применить чит clearInterval(ts) //остановить чит
          +3
          Вполне шустро отработал, кстати.
            +1
              +1
              Эхх круто!
              И как же утомили авто-сайты которые мало того что без флеш не работают,
              так ещё и ключевые данные оттуда достать уже подвиг.
              Хотя 90% их потребностей покрывает js.
                +1
                Класс! Верчу туда-сюда… ей, как остановиться?!
                  +1
                  Братья Люмьер со своим паровозом отдыхают… Видимо разработчики этого сайта в детстве рисовали мультики в блокнотах и тетрадках
                    +1
                    Забавно, но палец сильно устал. Пойду отдыхать.
                      0
                      а про возможность кликнуть на колесико забыли?
                        0
                        В меню есть кнопки «01», «02», «03», «04». С ними процесс немного упрощается :)
                        +1
                        Стареький ноут (Core DUo + 1 Gb) ссылка повечила намертво, вплоть до того, что выключать хардверное пришлось.
                          +9
                          Ну это же сайт обновленного Ноута, так что старые ноуты не поддерживаются.
                          +3
                          Не понимаю чего все в таком восторге.
                          У меня чувство, что я зря живу в 2012, а интернет достиг «такого» развития.

                          Спишем на своеобразное японское чувство прекрасного…
                            0
                            Почему у них такие безумно гигантские автомобили? Автомобиль размером в треть стадиона — это какой-то ужас.

                            (если кто не понял, я про масштаб машины на фоне окружающих зданий в движении).
                              +1
                              dev.yourtwig.ru/ ещё один примерчик схожей анимации. Хоть и не такой длинный, но трафика много.
                                0
                                креатив технолоджи прям :)
                                  –1
                                  Не могу разделить общих восторгов. Хром 21.0.1180.89 не делает анимацию, а вываливает все картинки в длинющий документ. Может быть надо было долго жать, но это ниоткуда не следует, документы выглядит полностью загрузившимся. Я промотал его до конца и так и не дождался ничего нового. FF 15.0.1 грузит, грузит, грузит… вся система начинает тормозить… ничего потребного не получается. В век HTML5 и тега video! Для кого они это сделали?
                                    0
                                    Самое интересное — что в этом и фишка! Нет там как таковой анимации, а псевдо-анимационный эффект получается именно при прокрутке этой длинющей страницы. video в данном контексте было бы крайне примитивно.
                                    +1
                                    4 полосы, куча машин и разных картинок… хрень какая то неопрятная
                                      +2
                                      Нет такого свойства, как «display: hidden». Есть display: none.
                                        0
                                        Вы правы, спасибо! Думал про display, а написал про visibility.
                                        –2
                                        Вот как все было: «Одна японская студия сделала эту промо-страницу на Flash, но тут, внезапно, оказалось, что заказчик ожидал модных трендов читай HTML5. Так дедлайн был уже не за горамиФудзи, то под страхом сэппуку коменде пришлось применить Flash2HTML5+CSS+JS конвертацию.» Но тормозит так, что лучше уж сэппуку.
                                          0
                                          На HTML5+CSS+JS можно сделать с помощью спрайтов, а не создавать длинную портянку в сотню экранов
                                            0
                                            Это уже зависит от транслятора (если они все-таки использовали его) или рук проектировщика если делали с нуля. В потенциале этой связки HTML5+CSS+JS я не сомневаюсь.
                                          0
                                          Никаких display:none там нету, простая портянка div'ов.
                                          Эффект получился интересный.
                                            0
                                            Есть там display: none. Откройте FireBug и посмотрите как меняется свойство display у div'ов с классами «section show» при прокрутке.
                                              0
                                              Да действительно в мозиле так.
                                              Откройте в хроме и посмотрите насколько быстрее все работает и что там не меняются стили.
                                              Вопрос. Зачем эти бесполезные телодвижения?

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое