Рулетки, открытие кейсов

Верстка магазина рандомных ключей KeysDrop

Верстка магазина рандомных ключей KeysDrop
Дизайн:
DiditalNox
Вид работ:
Верстка с адаптацией под мобильные устройства
Данный макет был создан в графическом редакторе Adobe XD. С такими макетами я ранее не работал и с самим редактором не был знаком. Я решил работать в avocode, чтобы не тратить время на изучения нового для меня редактора, но в конце оказалось, что avocode меня подвел. На самом деле ничего серьезного, но пара иконок в avacode сильно отличались от оригинала. Когда верстка уже была готова, я занялся оптимизацией, дизайнер мне немного рассказал о то как работать с Adobe XD и я быстро освоился.

Не могу сказать, что были какие-то сложные нерешаемые задачи для меня. Качественный макет, конкретное ТЗ, этого достаточно для комфортной работы. В данной работе много внимания я уделил всплывающим окнам. Ранее я использовал свой плагин, который позволял делать красивую анимацию появления и исчезания адаптивного модального окна, но он был написан довольно давно и со временем у меня накопились идеи о его усовершенствованию, а тут и по времени успеваю, да и с обновлением будет проще реализовать все задачи. Результат:


Адаптация окна:


Окон другого размера:


Анимация при наведении на пункт меню:


При прокрутке вниз навигационная панель прилипает к верху окна браузера и возвращается обратно при прокрутке вверх:


Анимация размытия при наведении на карточку товара:


Более детально элементы сайта и взаимодействие с пользователем можно увидеть на видео: