Как нарисовать разницу, которую не видно на фото

Compoglass — композитный лист из смолы, стекловолокна и плёнок производства ЭТИЗ Композит из Углича. Снаружи он похож на поликарбонат, и вся разница спрятана внутри, поэтому 404gen построила концепцию страницы для etiz.ru на разрезе, а не на фотографии: второй экран — сцена на Canvas, где лист собирается за четыре шага по мере прокрутки. Заголовки набраны широким гротеском Unbounded, текст и цены — Golos Text. Страница чередует светлые и тёмные полосы по темам, профили С-8, С-20 и СВ-38 нарисованы чертёжной линией, калькулятор показывает схему раскладки листов. Десять содержательных разделов, каталог на 35 позиций, мобильная версия.

Результат в цифрах

Десять содержательных разделов: от сборки листа до ответов на вопросы. Анимация сборки листа из слоёв на Canvas, четыре шага. Каталог на 35 позиций с подбором по задаче. Чертёжные схемы профилей С-8, С-20 и СВ-38. Две гарнитуры: Unbounded для заголовков, Golos Text для данных. Мобильная версия с горизонтальными карточками каталога.

Условия проекта

Стек: HTML, CSS, JavaScript, Canvas 2D, SVG, IntersectionObserver, Unbounded, Golos Text, Адаптивная вёрстка.