Работу нужно сделать до четверга, то есть срочно. Поэтому просьба браться за нее исключительно опытным специалистам, которые будут со мной на связи. Оплата строго в рамках "Безопасной сделки".
Чтобы вы понимали, о чем идет речь: механика работы слайдера как в canvas по ссылке
https://unseen.co/world/Нам нужен практически идентичный "глобус" и "плитка" поверх него.
С десктопа тянешь мышкой или с мобилы пальцем - глобус крутится, плитка перемещается внутри canvas. Пока крутите, наверняка заметите эффект "бесконечности". Красивая иллюзия, но, на самом деле, там крутятся одни и те же изображения.
Если у вас получится "вытащить" базу со страницы, которую я сбросил выше, пускай, для нас важен только конечный результат.
В прикреплении находится макет глобуса, на котором представлено 9 видов, как он должен выглядеть при "перетаскивании" элементов. То есть он вращается во все стороны, по меридианам и параллелям, от полюса к полюсу. При захвате мышкой глобус как бы ненамного отдаляется (как в примере по ссылке).
В прикреплении также находится файл slider1.png, на котором отображен внешний вид слайдера.
На изображении slider2.png отображен вид слайдера, когда нажимаешь на карточку, то есть появляется описание:
- в правом верхнем углу логотип бренда
- по центру сама картинка с глобуса
- под картинкой описание
- по бокам стрелки, чтобы можно было листать, все как в примере по ссылке выше.
- кликабельная кнопка, например, "Все бренды", которая позволит пользователю провалиться на другую страницу.
Выход с "фокуса" на карточке слайдера осуществляется либо по нажатию клавиши Esc на клавиатуре, если речь идет о десктопе, либо при клике "вне области". Опять же, как в примере по ссылочке выше.
Само собой, как и в примере, нужно, чтобы это дело масштабировалось. То есть чтобы можно было добавлять от 1 до N карточек (тут уж как хотите организовывайте метод "скармливания") данных. Можно json, можно через скрытый div,в котором данные бы строго структурировались. Главное, напишите какую-нибудь мини-документацию, как манипулировать данными внутри слайдера.
Желательно бы такое сделать дня за 2-3, мне кажется, вполне достаточно для людей, которые хорошо знакомы с three js библиотекой. Тем более, есть живой пример.
Исходники "пальцев" доступны в прикреплении.
Данный canvas будет упаковываться в блок размеров 1600х1500 пикселей
Шрифт: "GT Eesti Pro Display"
Стили для слова "Коллекции":
-webkit-text-stroke-width: 2;
-webkit-text-stroke-color: #FFF;
font-family: "GT Eesti Pro Display";
font-size: 90px;
font-style: normal;
font-weight: 700;
line-height: normal;
Стили для строки "любимых брендов":
color: #FFF;
font-family: "GT Eesti Pro Display";
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: normal;
Стили для дескрипшен "ведущая торговая сеть...":
color: #FFF;
text-align: center;
font-family: "GT Eesti Pro Display";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%;
Стили для текста кнопки "все бренды":
color: #005BFF;
text-align: center;
leading-trim: both;
text-edge: cap;
font-family: "GT Eesti Pro Display";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
Сама кнопка:
width: 224px;
height: 64px;
flex-shrink: 0;
