How is this functionality implemented?

  • 0
    There is an example site https://rockfacade-colours.rockwool.ru/#/office < br /> You need to do exactly the same functionality. I can't figure out how it's implemented.
    Where do you start?
    How long will it take approximately?
    JavaScript Anonymous, Apr 12, 2020

  • 3 Answers
  • 0
    There are many prepared pictures that are docked and changed.



    Open dev-tools and poke your example. Specifically, the blocks of the house are implemented in the form of svg, which is then painted using css fill.
    Lila Mills

  • 0
    https://developer.mozilla.org/en/docs/Web/API / Canv ...

    https://github.com/mdn/dom -examples / blob / master / ca ...



    A subtle hint of a possible solution.

    The most difficult thing will be to prescribe the palette + line up the source.

    Example: the top is red, the left is green, and the right is blue.

    We have a replacement area - 3 pieces. Each of the areas finds a specific color and replaces it with a color from the palette (here the main thing is to delve into the canvas API in order to return as it was or two canvases, where the upper one changes, and the lower one remains basic).

    Well, this is in general terms, but I think the principle is clear.
    Anonymous

  • 0
    It all depends on the hands of the programmer, such a project can be done in a day or a week, these are just different pictures prepared :)
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!