Как реализован данный функционал?

Question

[Iana S]

Есть сайт пример https://rockfacade-colours.rockwool.ru/#/office
Нужно сделать точно такой же функционал. Не могу разобраться как это реализовано.
С чего вообще начать?
Сколько времени примерно займет?

Answer 1

[profesor08]

Много заготовленных картинок, которые состыкованы и меняются.

Открой dev-tools и потыкай свой пример. Конкретно в нем, блоки дома реализованы в виде svg, которая потом красится с помощью css fill.

Comments

[Iana S]

это как ?
там как я поняла через svg и canvas?

[profesor08]

Iana S, квадратик красный, квадратик желтый, квадратик зеленый. Подменяешь их когда надо. Светов сколько угодно, вместо квадратика - любая фигура.

Answer 2

[8XL]

https://developer.mozilla.org/ru/docs/Web/API/Canv...
https://github.com/mdn/dom-examples/blob/master/ca...

Тонкий намек на возможное решение.
Самым сложным будет палитру прописывать + разлиновать исходник.
На примере: верхняя сторона - красный цвет, левая - зеленый, правая - синий.
У нас есть область замены - 3 штуки. Каждая из областей находит определенный цвет и заменяет его на цвет из палитры(тут главное в canvas API вникнуть, чтобы вернуть как было или два канваса, где верхний меняется, а нижний остается базовым).
Ну, это если в общем расписывать, но, думаю, принцип понятен.

Comments

[Iana S]

сколько бы это заняло у опытного специалиста?

[8XL]

Iana S,
Наверняка сказать не берусь, но на вскидку:
Подготовка исходника - фотошоп в помощь. По сути тоже на один референс не более пары часов(но это я по своим скудным навыкам сужу).
Сам код - не больше часа + какое-то время на представление(чтобы все было красиво).
Минут 10 попить кофе)

[Iana S]

Спасибо. Будем думать

[Iana S]

просто в примере, который вы скинули про video. Не до конца понятен механизм

[8XL]

Iana S, значит вы еще не показали его опытному специалисту.
Почитайте подробнее статью на mdn. Так каждый шаг подробно описан.

Answer 3

[MorganDusty]

Все зависит от рук программиста, такой проект можно сделать как и за день так и за неделю, это просто разные картинки заготовленные :)