Заказчик обратился с задачей произвести миграцию существующего статического сайта на Drupal 8. При этом было необходимо сохранить существующие дизайн и эффекты, оптимизировать производительность и добавить адаптивное отображение для мобильных устройств.
Главной особенностью проекта был принцип подачи информации, основанный на прокрутке сайта, служившей инициатором воспроизведения анимации. Второй по важности задачей была организация структуры и интуитивного интерфейса управления каталогом продукции. Обе задачи, и возникшие в ходе работы сопутствующие подзадачи, были детально проработаны и успешно реализованы оптимальными способами, с применением лучших практик и соблюдением стандартов Drupal.
Для воспроизведения анимации при прокрутке страницы мы использовали плагин FullPage.js и разработали на его основе аппарат состояний (state machine). Это позволило использовать только CSS анимацию с поддержкой аппаратного ускорения, повысило скорость загрузки сайта, и упростит его поддержку в будущем. Код, отвечающий за анимацию был хорошо структурирован, а его объем по сравнению с исходной реализацией уменьшился в десятки раз.
Не остались без улучшений и другие разделы сайта, помимо главной страницы. Для изображений продукции был реализован автоматический механизм генерации адаптивных изображений и экземпляров в формате WebP для современных браузеров.
Для всех страниц был разработан полноценный адаптивный вид для мобильных устройств.
Основные особенности проекта
- Быстрая и плавная анимация и эффекты при прокрутке страницы.
- Интуитивный интерфейс управления каталогом продукции.
- Перенос и актуализация контента сайта, и оптимизация его отображения.
- Полная адаптация сайта для работы на мобильных устройствах.
