BANTIK 20 сен 2012 в 18:54

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

1 мин

33K

CSS*HTML*

+21

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

iklementiev 20 сен 2012 в 19:37

Весьма забавная реализация.
Мне кажется, это больше для вау эффекта. Посмотрел пару раз, порадовался и забил.

Praeses 20 сен 2012 в 19:50

Вот здесь еще нечто подобное thedeepestsite.com/

Olegacy 21 сен 2012 в 16:44

красиво, но быстро устаешь :(
в консоли:


var ts = setInterval(function(){ $('body').trigger('mousewheel', -100); }, 100); // применить чит
clearInterval(ts) //остановить чит

inkvizitor68sl 20 сен 2012 в 19:59

Вполне шустро отработал, кстати.

Scrup 20 сен 2012 в 20:02

http://a-class.mercedes-benz.com/ru/ru/

pluser 20 сен 2012 в 20:09

Эхх круто!
И как же утомили авто-сайты которые мало того что без флеш не работают,
так ещё и ключевые данные оттуда достать уже подвиг.
Хотя 90% их потребностей покрывает js.

lordofwinds 20 сен 2012 в 21:16

Класс! Верчу туда-сюда… ей, как остановиться?!

Niksg 20 сен 2012 в 21:42

Братья Люмьер со своим паровозом отдыхают… Видимо разработчики этого сайта в детстве рисовали мультики в блокнотах и тетрадках

red_andr 20 сен 2012 в 21:45

Забавно, но палец сильно устал. Пойду отдыхать.

zein 20 сен 2012 в 22:05

а про возможность кликнуть на колесико забыли?

Shaytank 21 сен 2012 в 13:45

В меню есть кнопки «01», «02», «03», «04». С ними процесс немного упрощается :)

VolCh 20 сен 2012 в 22:09

Стареький ноут (Core DUo + 1 Gb) ссылка повечила намертво, вплоть до того, что выключать хардверное пришлось.

BANTIK 20 сен 2012 в 22:14

Ну это же сайт обновленного Ноута, так что старые ноуты не поддерживаются.

macik_spb 20 сен 2012 в 23:26

Не понимаю чего все в таком восторге.
У меня чувство, что я зря живу в 2012, а интернет достиг «такого» развития.

Спишем на своеобразное японское чувство прекрасного…

amarao 20 сен 2012 в 23:28

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

(если кто не понял, я про масштаб машины на фоне окружающих зданий в движении).

resurection 21 сен 2012 в 00:46

dev.yourtwig.ru/ ещё один примерчик схожей анимации. Хоть и не такой длинный, но трафика много.

YurkinPark 21 сен 2012 в 08:34

креатив технолоджи прям :)

michurin 21 сен 2012 в 08:36

Не могу разделить общих восторгов. Хром 21.0.1180.89 не делает анимацию, а вываливает все картинки в длинющий документ. Может быть надо было долго жать, но это ниоткуда не следует, документы выглядит полностью загрузившимся. Я промотал его до конца и так и не дождался ничего нового. FF 15.0.1 грузит, грузит, грузит… вся система начинает тормозить… ничего потребного не получается. В век HTML5 и тега video! Для кого они это сделали?

-1

dshster 21 сен 2012 в 09:28

Самое интересное — что в этом и фишка! Нет там как таковой анимации, а псевдо-анимационный эффект получается именно при прокрутке этой длинющей страницы. video в данном контексте было бы крайне примитивно.

Homakov 21 сен 2012 в 09:21

4 полосы, куча машин и разных картинок… хрень какая то неопрятная

timonstr 21 сен 2012 в 10:44

Нет такого свойства, как «display: hidden». Есть display: none.

BANTIK 21 сен 2012 в 11:22

Вы правы, спасибо! Думал про display, а написал про visibility.

azproduction 21 сен 2012 в 11:15

Вот как все было: «Одна японская студия сделала эту промо-страницу на Flash, но тут, внезапно, оказалось, что заказчик ожидал модных трендов читай HTML5. Так дедлайн был уже не за ~~горами~~Фудзи, то под страхом сэппуку коменде пришлось применить Flash2HTML5+CSS+JS конвертацию.» Но тормозит так, что лучше уж сэппуку.

-2

Niksg 21 сен 2012 в 12:51

На HTML5+CSS+JS можно сделать с помощью спрайтов, а не создавать длинную портянку в сотню экранов

azproduction 21 сен 2012 в 13:28

Это уже зависит от транслятора (если они все-таки использовали его) или рук проектировщика если делали с нуля. В потенциале этой связки HTML5+CSS+JS я не сомневаюсь.

eme 21 сен 2012 в 13:53

Никаких display:none там нету, простая портянка div'ов.
Эффект получился интересный.

BANTIK 21 сен 2012 в 13:57

Есть там display: none. Откройте FireBug и посмотрите как меняется свойство display у div'ов с классами «section show» при прокрутке.

eme 21 сен 2012 в 14:25

Да действительно в мозиле так.
Откройте в хроме и посмотрите насколько быстрее все работает и что там не меняются стили.
Вопрос. Зачем эти бесполезные телодвижения?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

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

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

Публикации

Истории