ВЕРАНДА
Кофейня · Сыктывкар
Тихая кофейня во дворе в Сыктывкаре. Editorial-минимализм, который оживает от прокрутки.
Задача
Концепт-работа. Заведение вымышленное, задача поставлена как для реального клиента.
Маленькой кофейне во дворе не нужен большой сайт. Ей нужно, чтобы человек за десять секунд понял настроение места, увидел часы и маршрут и не ушёл искать дальше.
Проверяли отдельную гипотезу: можно ли собрать живой сайт вообще без скриптов, на одном CSS.
Решение
Анимация на чистом CSS
Всё движение сделано новыми scroll-driven animations. Ни строчки JavaScript, поэтому страница не нагружает процессор и не мешает прокрутке.
Запасной путь для старых браузеров
Правила спрятаны в проверку поддержки. Там, где новых возможностей нет, сайт просто показывает всё сразу и остаётся полностью рабочим.
Одна колонка и много воздуха
Текст идёт узкой колонкой, как в журнале. Заголовок, фото, подпись, пауза. Ничего не соревнуется за внимание.
Часы и маршрут в двух тапах
Самое нужное вынесено наверх и продублировано в конце страницы, чтобы не искать.
Что внутри
- Вес страницы
- 45 КБ разметки
- JavaScript
- нет вообще
- Анимация
- animation-timeline: scroll() и view()
- Фотографии
- 13 кадров, оптимизированы под ширину экрана
- Языки
- русский
- Телефон
- та же одна колонка, крупнее шрифт
Четыре дня до живой ссылки. Самый дешёвый в поддержке вариант из всей витрины: без скриптов нечему ломаться при обновлении браузеров.
Демо вашего заведения бесплатно. Пишите в телеграм.
Написать@S3nd1ttt
Политика обработки персональных данных