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

gaal · 21-09-12 15:07:05

Может быть, вы уже и видели промо сайт 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 для конкретной сценки. Но как этот механизм работает, до конца я пока не понял.

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

habrahabr.ru/post/151884/

Опять глючит

An error was encountered
File: E:\Rooms\u231179\stoplinux.org.ru\www\forum\include\email.php
Line: 123

FluxBB reported: Unable to send email. Please contact the forum administrator with the following error message reported by the SMTP server: "555 5.5.2 Syntax error. hh10sm2135832lab.10 "

Отредактировано gaal (21-09-12 15:08:04)

MOP3E · 21-09-12 18:52:15

Бредятина какая-то получилась. IMHO, на флэше смотрелось бы точно так же.

gaal · 21-09-12 20:04:20

MOP3E пишет:

Бредятина какая-то получилась. IMHO, на флэше смотрелось бы точно так же.

Неа. Вся соль в покадровой анимации smile

MOP3E · 21-09-12 20:12:52

gaal пишет:

Неа. Вся соль в покадровой анимации

Хорошо, на флэше можно ту же самую покадровую анимацию сделать. Было бы желание.

gaal · 21-09-12 22:39:54

2 MOP3E

Можно. Не будет интерактива. Личного участия. Своя прелесть.

Белая рысь · 22-09-12 02:31:41

Стартовая страница на четверть сотни метров?.. Да, своя прелесть есть. BDSM, всё такое...

MOP3E · 22-09-12 06:46:26

gaal пишет:

Можно. Не будет интерактива. Личного участия. Своя прелесть.

Всё будет. Один-в-один такое же точно. Зато у заходящих на страничку пользователей не будет возможности спиздить чужой исходный код.

gaal · 22-09-12 12:55:07

MOP3E пишет:

Один-в-один такое же точно

Только нафига тащить лишнее (flash), если можно обойтись без него? O_o

Добавлено спустя 03 мин 24 с:

MOP3E пишет:

Зато у заходящих на страничку пользователей не будет возможности спиздить чужой исходный код.

swf файл можно декомпилировать 3dg.me/ru/flash/vzlom-flash-dekompilyat … brat-flash Декомпилятор SWF

По загрузке все равно будут все изобржения. Как-то приходилось внутрь заглядывать

Отредактировано gaal (22-09-12 13:00:13)

MOP3E · 22-09-12 15:41:27

gaal пишет:

Только нафига тащить лишнее (flash), если можно обойтись без него? O_o

Объясняю для тупых ещё раз:

MOP3E пишет:

у заходящих на страничку пользователей не будет возможности спиздить чужой исходный код

HTML + CSS + JS - это такая дрянь, в которой исходный код доступен абсолютно всем.

gaal · 22-09-12 16:30:28

2 MOP3E

Открою страшную тайну. Обфускация.

Flash декомпилируется. Ссылка на файл присутствует на странице

Форум StopLinux

Объявление

#1 21-09-12 15:07:05

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

#2 21-09-12 18:52:15

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

#3 21-09-12 20:04:20

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

#4 21-09-12 20:12:52

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

#5 21-09-12 22:39:54

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

#6 22-09-12 02:31:41

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

#7 22-09-12 06:46:26

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

#8 22-09-12 12:55:07

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

#9 22-09-12 15:41:27

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

#10 22-09-12 16:30:28

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

Подвал форума