Кейс модификации Tilda: создание слайдера с анимированными карточками отзывов для сайта

#кейс #тильда #tilda #javascript #веб #web #frontend

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

Помимо слайдера, при нажатии на карточку также должна воспроизводиться анимация переворачивания карточки, и должно открываться всплывающее окно.

Во время реализации я опирался на референс с Dribble, который мне предоставил клиент:

Зачем делать ещё один слайдер?

Я расскажу о своем подходе к разработке модификаций для Тильды на примере слайдера и покажу как можно интегрировать и расширить уже существующее решение на примере библиотеки Swiper.

Цель этой статьи — поделиться моим опытом разработки модификаций для Тильды и осветить некоторые особенности, которые могут возникнуть в ходе разработки нового функционала.

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

Из-за этого было решено взять за основу популярную библиотеку Swiper (почти 40 тыс. звезд на GitHub) для создания слайдеров и реализовать собственную анимацию на базе нее.

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

В проекте, для которого мне нужно было реализовать слайдер, уже были оформлены карточки с отзывами в виде Zero-block. Внутри каждая карточка представляет собой группу.

Для того, чтобы преобразовать данный блок в интерактивный слайдер, необходимо сделать несколько действий:

Далее опишу каждое из действий подробнее.

2.1. Добавление контейнера для слайдера

Первым делом, в редакторе зеро блока с карточками добавим элемент с HTML-кодом:

Размеры и положение этого элемента будут служить контейнером для слайдера. Таким образом, можно будет задать ширину контейнера для каждого брейкпоинта в зеро блоке.

Класс задавать этому элементу не нужно, потому что вставляемый HTML-код с классом swiperи так будет находиться внутри зеро блока.

2.2. Оформление групп в виде объектов

Чтобы карточки можно было использовать как слайды, их можно сгруппировать в виде объекта (Object). Это укажет Тильде, что каждую группу нужно оформить в виде отдельного DIV элемента, с которым можно будет взаимодействовать с помощью JavaScript.

Чтобы скрипт мог найти карточки, я задал CSS класс card-text для элементов с текстом отзыва. Благодаря этому классу, в коде карточки можно найти с помощью querySelectorAll:

Хочу отметить, что я нахожу зеро блок также через класс uc-review-cards, в отличие от того, как это обычно делают в бесплатных модификациях по rec id: #rec123456789. Я так делаю потому, что при поиске через класс удобно переносить блок между страницами или переключаться между разными версиями блока — не нужно каждый раз менять rec id в коде.

2.3. Инициализация слайдера

После того как элементы с карточками были найдены, их нужно переместить в контейнер слайдера Swiper и добавить класс swiper-slide:

Здесь поиск происходит по родительскому элементу с классом tn-group, он доступен из-за того, что ранее был выбран тип группы Object.

Теперь можно инициализировать слайдер:

Как видно, с первого раза слайдер завести не получилось. На самом деле он работает, но из-за особенностей верстки в Tilda он не отображается. Это можно исправить, модифицировав CSS стили.

2.4. Интеграция слайдера с существующей версткой Tilda

Прична, по которой слайдер не показывается вызван конфликтом со стилями Tilda. Из-за этого Swiper не может корректно рассчитать размер контейнера. Чтобы это исправить, нужно добавить дополнительные CSS стили:

Данный CSS масштабирует контейнер Swiper с учетом вложенности в зеро блок Тильды. В результате получим базовый слайдер с горизонтальной прокруткой:

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

У Swiper есть различные заготовки для переходов и одна из них позволяет гибко настраивать переходы между слайдами. Она называется creative effect, которую мы рассмотрим далее.

С помощью effect creative можно задать смещение, поворот, прозрачность и масштаб следующего и предыдущего слайдов:

Определим собственные параметры для effect creative таким образом, чтобы это было похоже на эффект из референса:

В результате получим следующий эффект:

Как видно, эффект работает, однако только для трех карточек.

Недостатком effect creative является то, что он работает только для 3-х слайдов (следующий, предыдущий и текущий). Применить данный эффект к большему количеству карточек не получится.

Однако есть выход: можно написать собственный плагин для Swiper, который бы обновлял положение всех карточек в соответствии с любыми заданными правилами в коде.

Плагин для Swiper — это просто функция, которая на вход получает экземпляр слайдера, его параметры и функцию для добавления обработчиков событий:

Определение функции для анимации слайдов

Чтобы анимировать слайды, нужно при каждом обновлении слайдера обновлять положение, угол наклона и другие параметры карточки.

К сожалению, Swiper не предоставляет обработчика события при обновлении слайдера. У него есть событие progress, которое срабатывает во время перетаскивания слайдера. Однако оно не срабатывает, когда происходит выравнивание по центру при окончании перетаскивания.

Вместо этого, можно использовать функцию Web API requestAnimationFrame, которая срабатывает на каждом кадре отрисовки изображения в браузере и с помощью которой можно реализовать плавные анимации с частотой 60 Hz и выше, в зависимости от устройства. Подробнее про то, как работает requestAnimationFrame можно прочитать на MDN.

В итоге получим заготовку для анимации слайдов:

Если запустить слайдер сейчас, то никакой анимации кроме перемещения, очевидно, не будет:

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

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

Обычно для удобства работы, значение интерполяции во время нормализуется и считается на интервале от 0.0 до 1.0.

Можно представить координаты карточек в координатной сетке слайдера по аналогии с предыдущим рисунком:

В данном случае левое значение будет равно 0, а правое — 1. Чтобы посчитать промежуточные значения координат, нужно знать ширину контейнера слайдера, его положение на странице, а также размеры и положение карточки, для которой рассчитывается интерполяция.

На самом деле, для нашего случая нужен немного смещенный диапазон: от -1 до 1. Это позволит поворачивать и смещать карточки как влево (-1), так и вправо (1).

В результате получим значения "сырой" (raw) интерполяции, которая может выходить за пределы [-1, 1]. Главное здесь то, что по данной формуле рассчитываемое значение всегда симметрично середины слайдера. Вот пример значений rawInterpolation для 10 слайдов:

Ограничить значения за пределами слайдера легко, воспользовавшись математической функцией clamp:

Можно посмотреть как работает полученное значение, задав трансформацию карточкам. Например, анимируем смещение по вертикали и угол наклона:

Сглаживание анимации интерполируемых параметров

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

Определим два значения интерполяции — линейное и кубическое:

На изображении ниже представлена разница между ними (только в нашем случае у нас всего две точки, а не множество точек, как на рисунке ниже, но принцип сглаживания один и тот же).

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

Финальные штрихи

Аналогичным образом можно подобрать значения для разной ширины дисплея. В итоге получим слайдер с отзывчивым масштабированием под каждое устройство.

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

В общей сложности разработка подобного слайдера с учетом подводных каменей Swiper, связанных с прокруткой по клику и отображением карточек в мобильной версии заняла порядка 12 часов.

Поставьте лайк или напишите комментарий если вам понравилась статья — так я пойму, что подобные посты с кейсами интересны, и буду писать их больше.