Это вообще люди делают?

Question

[hesrun]

Вопрос чисто философский...
Иногда штудирую всякие площадки типа awwwards и т.д.
Натыкаюсь на проекты такого рода https://www.thenewmobileworkforce.com
И собственно я как верстальщик с 5-и летним стажем, смотрю на это и просто в недоумении, как же они это делают...
Тут же у меня назревает вопрос, я один с таким стажем не умею это делать?
Есть вообще тут люди которые делали подобные проекты, как вы к этому пришли? Чем вдохновлялись? В какую сторону смотреть дальше?
Сколько вообще времени занимает такого рода разработка?

Comments

[Дмитрий]

Тут скорее всего работает "смотрите как круто мы умеем".

[Антон Швец]

Егор Скороходов, почему радует? Чем сложнее верстка, тем она дороже и тем больше работы. Наоборот, жаль. Лучше сложный проект, чем мелкие.

[andrew8712]

Я такие сайты закрываю сразу. Абсолютно не юзабельные. Навигация отсутствует как класс. Тормозит даже на MBPro.

[Сергей delphinpro]

andrew8712, у меня ничего не тормозит на компе 4-х летней давности. Но зато я две минуты пялился в белый экран загрузки =)

[edward_freedom]

andrew8712, в смысле "Даже"? Этот шлак ничего не тянет

[Сергей delphinpro]

Егор Скороходов, andrew8712, да ладно, чего там неюзабельного? Менюшка вполне себе на виду, навигация вперед-назад тоже, а большего там и не нужно. Это же по сути презенташка. Зашел потыкал кнопки, посмотрел картинки, впечатлился, купил продукт =))

[andrew8712]

MaxKorz, edward_freedom, эмм, ну вообще-то да, это верх производительности на лэптопах -)))

[Александр Маджугин]

edward_freedom, а для ваших сайтов необходимы 4 Titan'а в SLI? Тогда пожалуйста не делайте больши ничего.
Разрабам нельзя выдавать производительные компы...

[tema_sun]

У меня ничего не тормозит, но зачем этот сайт мне понятно не стало. Очень красиво и эффектно, но зачем?

По вопросу, у меня стаж гораздо больше и я так тоже не умею. Потому что это и не верстка вовсе, а довольно узкая ниша в разработке.

[devalone]

не вижу в этом сайте ничего хорошего, тормозит ужасно на моём pentium 3825U с 2Gb ОЗУ и при загрузке подвисло

[devalone]

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

[CityCat4]

Ээээ...мммм...я один не увидел на этом сайте ничего необычного? Ну красяво, да... Ну да, игру-имитатор напоминает, мне так вообще напомнила Mechwarrior II :) Но толку от такого сайта? Да еще два раза пришлось скрипты разрешать :)

Не тормозит, весьма красиво покачивается. Но у меня памяти мнооооого больше чем 2G и проц i7-7700K

[Станислав Б]

ubuntu 16.04
chrome
GeForce GT 610
i5-6600
8G

2fps

[Zhainar]

А кто-то еще удивляется почему фронтендерам столько платят

[Михаил]

Zhainar, не все фронтендеры занимаются подобными проектами

[JunDevTest]

CityCat4, Не один. Таких поделок полно, начиная с прототипов солнечной системы и заканчивая интерактивными фильмами на JS, Canvas , CSS3, HTML5, с загрузкой в пару минут и великим обломом в конце, на маломощных ПК (4GB ОЗУ и I7 старого поколения, встроенная карточка на 512mb). Что там говорить, когда вполне обычный YouTube
крешится и говорит о нехватке памяти, при просмотре котиков... Порой задумываюсь, как много лет назад, имея 512mb ОЗУ и проц 1.8Ghz на HDD диске ( одно время был IDE! ) на ПК 2006 года, я умудрялся играть в игры, смотреть youtube и видео вконтакте, слушать музыку онлайн и лицезреть фильмы в HD качестве... при этом никогда не наблюдая подвисаний и фризов ( на сколько я помню ). ОС WinXP старая добрая, пусть земля ей будет светлой!
Если меня когда-нибудь спросят, как помочь разработчикам оптимизровать сайты, я без промедления отвечу: Отдать продажникам их Макбуки, провести опрос по стране, какое железо используется в среднем без учета МСК и Питера, закупить такое железо и поставить им NPP++ с плагинами... На утро, можно будет определить не только показатели эффективности их работы, но и желание работать... Если кто-нибудь не справится - значит он не web-разработчик.

[CityCat4]

JunDevTest, Да, когда в 2007 году у меня появился гиг рамы (4х256) я готов был каркать кк ворона из мультика про домовенка "Счастье! Счастье!". Сейчас 16... При следующем апгрейде есть предположение ее станет 32 :) Куда катится этот мир?

[Вадим Щепотьев]

hesrun , А что сложного? Оно выглядит сложно, но по производительности сразу понятно, что опыта у разработчиков в этой сфере не так много (у меня лептоп с 16гб оперативы и I7 и нет я не собираюсь закрывать среду разробки, все вкладки в браузере и весь другой софт чтобы посмотреть на то как этот сайт не будет лагать). К сути как правило если вы работает на фриленсе, такой проект в вас врятли прилетит, а вот продажники в веб-студии, вполне могут такой взять, а дальше разработчики будут разбираться. Несколько лет назад, работал в веб-студии, еще совсем зеленый в интерактивном фронтенде залитали сайты где нужно было, к примеру визуализировать течение воды по трубам, датчики на этих же трубах, краны (можно было крутить), откуда то выходил пар когда поваричиваешь несколько рубильников, где то работали фильтры, выглядило не просто, но jQuery и canvas и SVG спасли планету. Так что это скорее всего не в опыте вашем дело, а в том что просто проект подобного рода не попадался.

[nomeNNescio]

andrew8712, а у вас точно настоящий MBpro? Открыл только что этот сайт на своем настоящем MBpro в хроме со 100500 открытыми вкладками + развернута вся рабочая среда и работает все просто офигенно.

[Дмитрий Макаров]

Когда то делали на Blender. Он все эти элементы интерфейса умеет делать из коробки.

[DevMan]

edward_freedom, огня ... требует жопа твоя!

Answer 1

[Dima Polos]

Поделюсь с вами вот такой ссылкой:
https://www.youtube.com/playlist?list=PLswdBLT9llb...

Comments

[Dima Polos]

MaxKorz, немного не понял, это про стиль написания Юры, из видео, что я скинул?)
Да, меня тоже всегда это веселило)
Но это не видео курс, а стримы по фану, так что думаю в профессиональной разработке он пишет почище. Хотя не факт)
В любом случае, человек бесплатно делится классными вещами, и при наличие знаний, опыта и фантазии можно очень много подчерпнуть для себя.

Answer 2

[Александр Таратин]

Люди и стадион сделаны с софте подобном Autodesk 123D
Машинка за исключением экрана с wareframe рендером тоже (на экране с wareframe просто замоделена).
Часть задников сделана текстурой на скайбоксе.
Часть людей - плоскими спрайтами с текстурой.
Переходы - горизонтальным размытием с рандомизированной силой в зависимости от y координаты.
Глобусов таких кучу можно найти на https://threejs.org/

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

Comments

[hesrun]

Глобус тормозит, немного, тоже заметил...
С точки зрения теории, я понимаю что это какой-то wrbGL, но у меня не укладывается в голове как к этому можно прийти, когда ты делаешь, параллаксы, анимированные переходы и много остального... Но как это сделать я не понимаю, и не находил даже не одного гайда...

[Александр Таратин]

hesrun, Там нет ничего особенного для человека из геймдева, просто у вас другая специализация.

[Андрей Федосеев]

hesrun, нет таких гайдов. Это штучные промо-работы. Motion design, как правило, делают гейм- или видео-дизайнеры в удобной для них среде (Cinema, After Effect), потом он натягивается на Web. Ниже кинули ссылку на ютуб Юры Артюха, он любит такие штуки стримить.

Answer 3

[Anton Filippov]

опыт измеряется не в годах работы ;-)

Comments

[origami1024]

а в чем? :3

[Anton Filippov]

origami1024, я бы назвал это разнообразием решений в профессиональной сфере. В целом, конечно, небольшая корреляция со временем будет, но сплошь и рядом можно видеть более опытных чуваков с 2 годами работы, нежели динозавры отсидевшие по 8-10 лет на одном проекте.

[origami1024]

Anton Filippov, ну тогда получается, что опыт-то всё равно измеряется в годах работы,

разнообразием решений в профессиональной сфере

- это отдельный параметр

Answer 4

[profesor08]

Все это на glsl шейдерах, я про фон, эффекты, модели и тд. THREE.js лишь для того, чтоб это все связать. Vue.js для управления контентом. Без знания тригонометрии и матана, такое сделать непосильно.

Просто представить функцию, которая выполняется, миллионы раз за кадр, для одной отдельной точки, и в зависимости от, доступных ей, параметров рисует все что ты видишь на экране. Просто взрыв мозга.

Answer 5

[bro-dev0]

Если вы не знаете как это делать в принципе то да проблема в вас, даже за пол года работы нужно знать что умеет браузер. Ну а сделать такое самому в целом можно но чаще делают командой.

Answer 6

[Ольга Ветер]

Тут еще очень важно взаимодействие с дизайнером, помимо всего прочего. Для всех этих переходов и паралаксов нужна очень качественная графика. Мне за три года такого качества подготовки макетов не встречалось.

Answer 7

[JunDevTest]

Ещё в тему.
https://tproger.ru/digest/top-20-web-sites-2016/
А вообще, когда смотришь на такого рода приложения в браузере, будь-то example или лендинг, хочется творить и это реально мотивирует. Однако, практической пользы у такого сайта практически нет, но зато своему fullstack-тимлиду есть чем похвастать в не рабочее время за стаканом пива.

Comments

[АртемЪ]

По ссылке явно не 20 лучших HTML5 сайтов. Оригинальных - возможно, но большинство даже до уровня хорошего далеко не дотягивает.

[JunDevTest]

АртемЪ, Возможно, но они похожи на тот, который указал ТС в качестве примера.

Answer 8

[Артем Спиридонов]

Это не верстальщик, а т.н. 3D Artist.