Верстка страницы (без хедера и футера) с 3д анимацией (WebGL)

HTML-версткаЗакрыт1 заявка351 просмотр
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

На первом экране 3д модель(уже готова, от вас только формат который вам нужен для работы).

Объяснение поведения элементов

1 экран. Пример: https://www.awwwards.com/inspiration/3d-polygon-transition-garden-eight. Положение банки зависит от перемещения курсора. При клике на правую стрелку происходит тоже самое, что на примере. Только БЕЗ разделения на полигоны. В нашей анимации при клике должен совершаться один оборот банки вокруг оси - меняется этикетка, и таким образом создается эффект "смены" разных банок. Что-то похожее по прокрутке тут https://www.awwwards.com/inspiration/power-horse-drag-the-can (имеется ввиду приблизительная скорость и зависимость от курсора, сама банка остается в таком же положении как на макете)

2. Скролим до третьего блока. Скрол упирается в нижний край банки. Из центра кэпа довольно быстро увеличивается круг (как пшик краски) и заполняет весь экран. БЕЗ ПАУЗЫ сразу появляется текст. Пример: https://kdcap.com (заполнение экрана другим цветом при клике на меню, по скорости тоже близко к тому, как хотелось бы)

3. В четвертом блоке с новостями: левая часть экрана фиксируется, скролятся только записи (правая часть). Когда левая и правая части выровняются по нижнему краю - скрол дальше обычный.

3D-модельWebGL
4 года назад
korzhb
Богдан 
26 летУкраина
4 года в сервисе
Был
3 года назад
1 отзыв