R50 6bd632a62c0aefc13c39e3b5f39d104b
Веб-разработка

Вёрстка и анимации для сайта сети спортивных клубов в Санкт-Петербурге

Добавлено 07 фев 2023 в 12:37
Проект SportLife.

Для отдельных элементов сайта использованы WebGL эффекты: «наполнение» фотографии спортзала, морфинг изображений в слайдере, эффект дисплейсмента в секции с бассейном. Анимация графика распределения возрастов сделана вручную и использует svg кадры. Круговой график сделан параметрическим и полностью программно (canvas 2d). Схема очистки воды сделана с использованием Lottie и привязана к скроллу страницы. На всем сайте присутствует параллакс, смусскроллинг, а другие анимации и эффекты связаны со скроллом. Для второстепенных страниц использован Preact.

Использованные технологии: Pure js, Preact, Canvas 2d animations, WebGL shader effects, Flickity slider.

Ссылка на сайт: https://sportlifeclub.ru/
41f759bf97