Отзывы Breezzly

О компании

Breezzly — онлайн-школа по анимации интерфейсов, дизайну сайтов, мобильных и веб-приложений. breezzly.ru

Задача

Создать модуль в системе управления веб-платформой, который позволит администраторам публиковать отзывы от выпускников курсов Figma, InVision Studio, Tilda, Principle и другим. Заказчику важно, чтобы у каждого выпускника можно было добавить ссылку на соцсеть, фото, и описание с подчеркиваем ключевых мыслей. А в первом экране играл интерактивный динамический шоурил из дизайн-работ.

Решение

Frontend модуля мы сделали на Vue.js, а Backend — на GoLang. Это позволило с легкостью встроить модуль на платформу, так как там используются те же технологии.

Одной из важнейших частей модуля является динамический шоурил из дизайн-работ. Было важно реализовать его так, чтобы анимации проигрывались без просадок fps и с минимальной нагрузкой на процессор.

Чтобы обеспечить первую составляющую, в качестве инструмента для реализации анимаций был выбран не JavaScript, а связка CSS анимаций и Vue, для управления их состоянием. 

Для решения вопроса с нагрузкой на процессор были использованы такие технологии, как Intersection Observer API и Page Visibility API, с помощью которых можно остановить проигрывание анимации тогда, когда она находится вне поля зрения пользователя.

Результат

Первые отзывы о курсах Breezzly уже опубликованы на платформе.