Веб-разработка

КУС. Как сверстать анимированный флаг?

Как сверстать анимированный флаг? Новый конкурс уважаемых советчиков и награждение победителя подпиской на все лекции бюро

9 сен 2021
👁 4793   🗩1
Веб-разработка

КУС. Как сверстать анимированный флаг?

Как сверстать анимированный флаг? Новый конкурс уважаемых советчиков и награждение победителя подпиской на все лекции бюро

9 сен 2021
👁 4793   🗩1
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Ура! Сегодня мы объявляем очередной КУС — Конкурс уважаемых советчиков. Этот конкурс посвящён веб‑разработке.

Недавно в бюро сделали проект «Три слова», где люди предлагают три слова — значения цветов российского флага или три важных для себя ценности. На сайте проекта летают анимированные флаги из предложенных слов.

Словами можно поделиться в соцсетях, в посте появится картинка с флагом:

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

Уважаемые советчики! Предложите свою реализацию встраиваемого анимированного флага из трёх слов на веб‑технологиях.

Исходя из задачи, к решению предъявляются не только технические, но и дизайнерские требования:

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

  • надёжность и устойчивость к окружающей среде — флаг должно быть легко встроить на сайт, он должен быть базово устойчив к воздействию окружающего его ХТМЛ‑ и ЦСС‑кода;

  • гигиена кода — «под капотом» всё должно быть аккуратно и чисто, чтобы код было не сложно читать, понимать и развивать;

  • соответствие анимации — флаг должен колыхаться так же, как на сайте «Три слова»;

  • простота установки — встроить флаг с нужными словами на сайт должно быть под силу человеку с базовыми знаниями веб‑технологий.

Вы можете использовать нашу реализацию с сайта «Три слова». Но имейте в виду: мы запускали сайт в сжатые сроки и наше решение «в лоб» не идеальное технически и не самое простое в обслуживании. В чистом виде оно не удовлетворяет всем требованиям задачи конкурса.

Друк, Коммершиал Тайп и Кастом Фонтс

Мы использовали для флагов платный шрифт «Друк», вы можете взять любой похожий бесплатный, хоть Ариал Болд.

Друк, Коммершиал Тайп и Кастом Фонтс

Приложите в комментарии ссылку с демонстрацией своего решения до понедельника 20 сентября. Можно использовать любой хостинг, Кодпен или подобные ресурсы. Можно использовать Яваскрипт, канвас и другие веб‑технологии. Укажите имя и фамилию, без этого работа не сможет участвовать в конкурсе. С понедельника новые работы могут появиться, но не будут участвовать в конкурсе. А через две недели мы рассекретим комментарии, оценим работы и назовём победителя.

В жюри два разработчика и арт‑директор. Мы с Василием Половнёвым оценим работы с технической стороны, а Михаил Нозик оценит с позиции дизайнера и пользователя. Каждый из членов жюри поставит каждой работе оценку от 1 до 5. В четверг 23 сентября, т. е. ровно через две недели, мы объявим результаты конкурса.

Победитель получит ценный подарок — три месяца подписки на все лекции бюро.

Веб‑разработкаКонкурс
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Запинить

Комментарии

Александр Панасин

Ссылка на демонстрацию
https://codepen.io/nexwich/pen/LYLdGWP

Ссылка на исходный код
https://github.com/Nexwich/project-flag

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы