Легенда музыки и икона стиля Фредди Меркьюри, несменный солист группы Queen, славится своим 4-октавным диапазоном и харизматичной сценической личностью. Но также он запомнился удивительным чувством стиля и новаторским, бесстрашным и ярким подходом к моде.
ЛОНГРИД, ПОСВЯЩЁННЫЙ ЭВОЛЮЦИИ СТИЛЯ ФРЕДДИ МЕРКЬЮРИ
Сделать сайт в рамках курса по креативной вёрстке на Тильде от Ани Мельник, где прокачать свои навыки в пошаговой анимации и развить нестандартный подход к дизайну.
FREDDIE MERCURY
ГЛАВНАЯ ЦЕЛЬ ПРОЕКТА
Первым этапом работы над проектом был сбор информации для составления прототипа сайта. Изучила множество сайтов, посвященных группе Queen, а также фан-клубов Фредди Меркьюри в соцсетях. На основании полученной информации был составлен текст и прототип сайта.
СБОР ИНФОРМАЦИИ
РАБОТА НАД ПРОЕКТОМ. АНАЛИТИКА
ДИЗАЙН САЙТА В ФИГМЕ И ПЕРЕНОС В ТИЛЬДУ
Концепция лонгрида подразумевала много анимации и нестандартных решений. Для реализации этого множество изображений были вырезаны вручную и обработаны в графическом редакторе Фигма
ПОДГОТОВКА ИЗОБРАЖЕНИЙ И GIF
Изначально макет был сделан под стандартную верстку в Тильде, но потом было принято решение верстать в формате AUTOSCALE, и макет пришлось немного переделывать — уменьшать размер поля, размеры шрифтов и т. д.
СОЗДАНИЕ ДИЗАЙН-МАКЕТА В ФИГМЕ
Сначала верстка в Тильде осуществлялась поэлементным переносом файлов из Фигмы в Тильду без настройки пошаговой анимации, без добавления кода и т. д.
ПЕРЕНОС МАКЕТА В ТИЛЬДУ
В проекте были настроены практически все виды Step by Step анимации:
- On screen — элемент анимируется, если находится на экране
- On scroll — элемент анимируется по скроллу (горизонтально или вертикально)
- On hover — элемент анимируется, если мышью навести на какой либо обьект (триггер).
НАСТРОЙКА ПОШАГОВОЙ АНИМАЦИИ
С помощью кода в проекте были сделаны следующие модификации:
- Анимированное меню, сделанное в зеро блоке. Меню заблюрено ии зафиксировано вверху экрана также с помощью кода.
- В левом верхнем углу добавлена кнопка включения музыки. При желании воспроизведение песни Queen «Made in heaven» можно приостановить.
- Настроен анимированный прелоадер в зеро блоке
РАБОТА С КОДОМ
ПОСМОТРЕТЬ КОНЕЧНЫЙ РЕЗУЛЬТАТ МОЖНО В ВИДЕО
ТЕХНИЧЕСКИЕ НАСТРОЙКИ
- Настроена мобильная версия в 4 дополнительных разрешениях экрана;
- Создана анимированная страница 404.
ВАШ БУДУЩИЙ ПРОЕКТ БУДЕТ ЕЩЕ ЛУЧШЕ! ДАВАЙТЕ НАЧНЕМ РАБОТУ?
Заполните простую форму и я свяжусь с вами в ближайшее время
