Кейс модификации сайта на Tilda: слайдер отзывов в виде анимированных карточек
Создание уникальных интерфейсов для сайтов на платформе Tilda — задача, которая требует нестандартного подхода и навыков работы с анимацией. Этот кейс описывает процесс разработки анимированного слайдера с отзывами.
Подробное описание процесса реализации читайте в статье на vc.ru
Создание уникальных интерфейсов для сайтов на платформе Tilda — задача, которая требует нестандартного подхода и навыков работы с анимацией. Этот кейс описывает, как был разработан и внедрен анимированный слайдер с отзывами, где карточки расположены по кругу и при нажатии на них происходит анимация переворота с открытием всплывающего окна.
Задача
Основной задачей было создание интерактивного слайдера на Tilda, имитирующего эффект вращения карточек, аналогично колоде игральных карт. Для каждой карточки предусмотрена анимация переворота при клике, с последующим открытием всплывающего окна с детальной информацией.
Референс и дизайн-анимация
Для визуализации анимированного слайдера использовался референс с Dribbble, предложенный клиентом. Предоставленный пример готовой анимации позволил сократить время на согласование в процессе работы и при этом выполнить ожидания клиента максимально точно.
Пример анимации слайдера с Dribble, предоставленный клиентом
Основные этапы создания анимированного слайдера отзывов
1. Выбор технологии: библиотека Swiper
Для разработки слайдера была выбрана библиотека Swiper — гибкое и популярное решение для создания слайдеров, которое не требует jQuery. Это делает сайт более легким, что позволяет увеличить скорость загрузки. Расширение стандартного функционала Swiper с помощью собственных настроек и анимации позволяет адаптировать библиотеку под задачи и потребности клиента.
2. Подготовка Zero-block для слайдера
Первым этапом стало добавление контейнера слайдера в Zero-block и создание карточек отзывов как отдельных слайдов. Для настройки и точного позиционирования слайдов был внесен ряд изменений в CSS, чтобы устранить конфликты со стилями Tilda. Добавление уникальных классов для элементов на этом этапе позволило улучшить гибкость и адаптируемость слайдера.
3. Использование эффекта "creative" для начальной анимации
Чтобы создать нужный анимационный эффект, был использован встроенный в Swiper "effect creative" с кастомными параметрами. Однако базовый функционал этого эффекта был ограничен тремя слайдами, что требовало разработки дополнительной уникальной анимации.
4. Создание уникальной анимации с помощью интерполяции
Для плавного перемещения карточек по кругу и имитации динамичного эффекта вращения была разработана собственная анимация с использованием метода линейной интерполяции. С помощью такого подхода были реализованы изменения в координатах, углах и масштабировании карточек, обеспечив симметрию относительно центра. Дополнительно этот эффект был адаптирован под разные разрешения экрана.
5. Финальная реализация и результат
В итоге был создан уникальный анимированный слайдер, который полностью соответствует пожеланиям клиента. Карточки отзывов реагируют на клики, переворачиваясь и открывая всплывающее окно с отзывом. Весь процесс разработки, включая адаптацию слайдера для мобильных устройств, занял около 12 часов.
Результат модификации: анимированный слайдер с всплывающим окном
Заключение
На примере данного кейса видно, что возможности платформы Tilda позволяют создавать решения с уникальным поведением, которого изначально в ней не было. Использование современных библиотек наподобие Swiper позволяет сократить время разработки и создавать гибкую модификацию.
В результате данной модификации, клиент получил уникальный блок с анимацией, соответствующей референсу.
