The customer requested to migrate the existing static site to Drupal 8. At the same time, it was necessary to preserve the existing design and visual effects, optimize performance and add a responsive display for mobile devices.
The main feature of the project was the principle of presenting information based on page scrolling, which served as a trigger of the animation. The second most important task was the organization of the structure and intuitive interface of managing the product catalog. Both tasks and related sub-tasks that appears during the work were thoroughly worked out and successfully implemented in optimal ways, using best practices and in full compliance Drupal standards.
To play the animation while scrolling the page, we used the FullPage.js plugin and developed a state machine system based on it. This allowed us to use only CSS animations with support for hardware acceleration, increased the speed of loading the site and simplify its support in the future. The code related to animation was well structured, and its size compared to the original implementation decreased by dozen of times.
Other sections of the site, in addition to the main page, were not left without improvements. For product images was implemented an automatic mechanism for generating adaptive images and instances in WebP format for modern browsers.
A full adaptive view for mobile devices has been developed for all pages.
The main features of the project
- Fast and smooth animations and visual effects when scrolling the page.
- Intuitive product catalog management interface.
- Transfer and updating of site content, and optimization of its display.
- Fully adaptive site for mobile devices.
