Демо-магазин — фотоплёнка и камеры
Живой сайт — plenka-store.vercel.app ↗ПЛЁНКА. Полноэкранный слайдер с рамкой-уголками
Магазин фотоплёнки, аналоговых камер и аксессуаров. Тёмный тёплый фон, кремовый серифный курсив и моноширинные индексы: главная — полноэкранный слайдер подборок с кадром в рамке-уголках и заголовком, разбитым по краям, каталог с подписями «01. — название — цена», карточка с характеристиками в таблице.
Задача
Небольшой петербургский магазин плёнки и восстановленных камер хотел витрину, похожую на сайт кинорежиссёра, а не на маркетплейс: тёмный экран, кадр в центре, серифные заголовки, минимум интерфейса. Референс — портфолио оператора Джейсона Берга. При этом ассортимент разнородный: плёнка с ISO и форматом, камеры с характеристиками, аксессуары и книги, и у всего должна быть нормальная корзина с доставкой.
Решение
Вход начинается с лоадера: счётчик от 0 до 99, вспышки миниатюр товаров и логотип, съезжающийся из двух половин. Главная — пять полноэкранных слайдов подборок: затемнённый фон, в центре кадр в рамке с четырьмя уголками, над ним mono-лейблы, под ним индекс «01.» и «ISO 400 / 36 кадров», заголовок разбит по краям с курсивными буквами. Слайды листаются колесом, свайпом и клавишами, с кроссфейдом и лёгким масштабом фона, кадр реагирует на курсор параллаксом; режим «Список» превращает слайдер в вертикальный перечень с индексами. Нижняя фиксированная строка держит копирайт, переключатель слайдер/список, фильтр разделов, бегущий таймкод и «Помощь». Каталог — тёмная сетка с уголками при наведении и подписями «01. — название — цена», фильтр по разделу, формату и цене. Карточка: кадр в рамке, миниатюры, серифное название, таблица характеристик, «В корзину →». Оформление заказа с городами, плитками СДЭК, Яндекс и Ozon, картой пунктов выдачи Петербурга и картой адреса, самовывозом с Лиговского.
Что внутри
- Лоадер-счётчик 0→99 и сборка логотипа из двух половин
- Полноэкранный слайдер подборок с рамкой-уголками и заголовком по краям
- Режим «Список» и фиксированная нижняя строка с таймкодом
- Каталог с mono-подписями и фильтром по формату плёнки
- Карточка с таблицей характеристик
- Двенадцать пунктов выдачи Петербурга на карте
- Тёмные карты доставки через CSS-фильтр
Нужен магазин в вашей нише?
Соберём витрину под ваш бренд — с каталогом, корзиной, CMS и интеграциями. Покажем прогресс каждые 2–3 дня.