Если мыслить не только в мире знакомств, концепция смахивания влево или вправо для выражения выбора может быть применена во многих случаях использования с целью сбора пользовательских предпочтений по любой теме.
В этом контексте я решил самостоятельно создать «Карусель лайков» на чистом JavaScript и поделиться с вами своим опытом.
Карусель прокрутки можно рассматривать как колоду сложенных карт FIFO. Проведение вправо по самой верхней карточке означает «нравится», в противоположном направлении - «не нравится». Более того, смахивание по направлению к верхней границе экрана считается «супер-подобным». Когда первая карта выбрасывается, вторая занимает ее место до тех пор, пока в колоде больше не останется карт.
Вот чего мы собираемся достичь:
Отлично! Не правда ли?
Шаг 1. Давайте сделаем это
В качестве первого шага мы собираемся написать страницу начальной загрузки для нашего проекта:
#board div - это наш холст, а все непосредственные дочерние элементы с классом .card - элементом колоды.
Учитывая, что браузеры индексируют div с абсолютным позиционированием в порядке их появления, мы знаем, что последний элемент .card всегда будет самой верхней карточкой.
Шаг 2. CSS на помощь!
Если мы попытаемся открыть нашу веб-страницу, мы увидим только белый экран.
CSS нам на помощь!
В результате должна получиться белая карточка посередине слегка серого фона.
Шаг 3. Это своего рода волшебство
Теперь нам нужно зафиксировать событие считывания, как только пользователь взаимодействует с карточкой.
Для этого я выбрал замечательную библиотеку HammerJS.
Hammer - это библиотека с открытым исходным кодом, которая распознает жесты, выполняемые касанием, мышью и указателем событий. У него нет никаких зависимостей, и он небольшой.
Включив библиотеку Hammer (v2.0.8 на момент написания), мы можем начать создание класса, который фактически будет обрабатывать жесты:
Шаг 4 - Давай, давай на меня!
Hammer передает много информации об обнаруженных жестах в качестве аргумента функций обратного вызова, которые мы передаем его распознавателям.
Давайте напишем логику, которая заставляет карточку перемещаться вместе с указателем при перетаскивании и возвращаться обратно при отпускании.
Когда пользователь начинает перетаскивать карточку, мы сохраняем начальные координаты и удаляем свойство перехода CSS, чтобы получить движение с той же скоростью, что и указатель.
Поскольку нам неизвестны единицы измерения CSS translateX и translateY, мы вызываем getComputedStyle, чтобы преобразовать существующие свойства в матрицу преобразования CSS с пространственными координатами в пикселях.
Когда карта отпускается (e.isFinal), мы возвращаем свойства перехода, чтобы она могла плавно вернуться назад через верх колоды (замедление).
У вас может возникнуть соблазн изменить верхнее и левое свойства вместо того, чтобы иметь дело со свойствами translateX и translateY, но современные браузеры делают потрясающую работу под капотом - используя графический процессор вашего устройства - для отображения плавных переходов при применении изменений в свойствах преобразования CSS.
Шаг 5 - 45 оттенков вращения
Если вы когда-либо использовали приложение Tinder, вы, вероятно, заметили, что чем больше вы перетаскиваете к вертикальным границам экрана, тем больше карта поворачивается в выбранном направлении.
Чтобы воспроизвести эту функцию, нам нужно вычислить значение от 0 до +/- 45 градусов на основе соотношения между положением карты по оси X и общей шириной обзора.
Шаг 6 - Я верю, что умею летать!
Когда положение пальца достигает определенного порога, карту следует выбросить в выбранном направлении при отпускании.
Для этого мы можем повторно использовать сделанные ранее вычисления и применить эти числа, чтобы знать, следует ли нам класть карту обратно в колоду или нет в конце жеста панорамирования.
Шаг 7 - Ударьте еще одну!
Пришло время добавлять карточки программно после каждого успешного смахивания (большое спасибо picsum.photos за удобный API изображений-заполнителей):
Поместите вторую карточку в div #board:
Теперь давайте добавим новую карточку после каждого успешного смахивания:
Учитывая, что мы создаем новый экземпляр Hammer снова и снова после каждого успешного проведения, мы должны уничтожить предыдущий, чтобы улучшить распределение памяти; добавьте следующую строку внутри метода handle, непосредственно перед вызовом new Hammer:
Шаг 8 - Визуальные эффекты
В оригинальной карусели возникает приятный эффект выпуклости, когда пользователь нажимает на самые верхние вертикальные стороны карты, и следующие карты медленно увеличиваются в размере, как только первая начинает покидать колоду.
Для первого эффекта нам просто нужно добавить прослушиватель событий Hammer Tap и метод его обработки:
Во втором случае нам нужно применить соотношение между положением карты по оси X и общей шириной представления к свойству CSS scale, как мы это сделали для свойства поворота при панорамировании.
Не забудьте установить начальное значение шкалы 0,95 для всех блоков .card в нашем CSS.
transform: translateX(-50%) translateY(-50%) scale(0.95);
Мы сделали это!
Спасибо за то, что вы следовали этому руководству.
Если вам понравилось, пожалуйста, хлопайте, помечайте и делитесь!
Вы можете найти полный код в моем репозитории GitHub:
