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

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

Для воспроизведения анимации при прокрутке страницы мы использовали плагин FullPage.js и разработали на его основе аппарат состояний (state machine). Это позволило использовать только CSS анимацию с поддержкой аппаратного ускорения, повысило скорость загрузки сайта, и упростит его поддержку в будущем. Код, отвечающий за анимацию был хорошо структурирован, а его объем по сравнению с исходной реализацией уменьшился в десятки раз.

Не остались без улучшений и другие разделы сайта, помимо главной страницы. Для изображений продукции был реализован автоматический механизм генерации адаптивных изображений и экземпляров в формате WebP для современных браузеров.

Для всех страниц был разработан полноценный адаптивный вид для мобильных устройств.

Основные особенности проекта

  • Быстрая и плавная анимация и эффекты при прокрутке страницы.
  • Интуитивный интерфейс управления каталогом продукции.
  • Перенос и актуализация контента сайта, и оптимизация его отображения.
  • Полная адаптация сайта для работы на мобильных устройствах.