Заказ Сайты

Сайт «Фестиваля сыра»: лендинг с анимацией

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

12: разделов на одной странице
3: дня программы во вкладках
2: версии: компьютер и телефон

Обсудить похожую задачу Все работы: сайты

Сайт «Фестиваля сыра»: лендинг с анимацией — Запись живого сайта: прокрутка, анимации и переходы — как их видит посетитель. Переключайте компьютер и телефон, а разделы справа переносят к нужному месту страницы. Пробел ставит на паузу, стрелки листают разделы.

Задача

Показать обновлённый стиль фестиваля на сайте: всё, что нужно гостю, на одной странице, плюс короткий ролик с анимацией сайта для презентации проекта.

Что сделано

Лендинг из двенадцати разделов: о фестивале, программа, сыроварни, Кострома, сувениры, фото прошлых лет, билеты, вопросы, карта и подписка
Первый экран оживает: кусок сыра падает в кадр и пружинит, дырки и буквы появляются по очереди, следом выезжают даты и город
Анимации на GSAP и ScrollTrigger: блоки проявляются при прокрутке, бегущая строка, параллакс фото, шапка становится жёлтой после первого экрана
Программа на три дня во вкладках, вопросы раскрываются, карточки поднимаются под курсором
Карта площадки нарисована в SVG: сцены, ряды, набережная и точки с номерами
Мобильная версия: одна колонка, бургер-меню, крупные кнопки
Записи прокрутки сняты кадр за кадром: часы страницы идут ровно на кадр, поэтому анимации не дёргаются

Чем подтверждено

На странице — запись сайта на компьютере и на телефоне, по разделам можно перейти кликом

Моя роль

Дизайн и вёрстка лендинга, анимации, мобильная версия, записи прокрутки; в основе — фирменный стиль клиента

Инструменты

HTML
CSS
JavaScript
GSAP
ScrollTrigger
SVG
Адаптивная вёрстка

Ссылки

Концепт рестайлинга по заказу клиента, не официальный сайт фестиваля; сайт сделан для презентации проекта и не опубликован. Логотип и афиши — дизайн клиента. Фото — Unsplash, бесплатная лицензия.

Материалы

11 · Нажмите, чтобы открыть крупно

Что ещё можно мне поручить

Лендинг под услугу или курс с формой записи
Сайт-каталог: работы или товары по разделам, у каждой позиции страница с заявкой
Доделать или пересобрать сайт после другого исполнителя
Подключить формы сайта на WordPress, Tilda или Битрикс к CRM и Telegram
HTML-шаблоны писем для рассылок из CRM
Ускорить сайт, починить мобильную версию, провести SEO-аудит

Обсудить похожую задачу