От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это 🙂 И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений.
На этот раз я покажу вам, как очень просто делается анимация элемента — а точнее, его перемещение — вдоль пути SVG! Для этого мы создали небольшую библиотеку, которая позволяет создавать такие эффекты.
Если вы будете следовать этому руководству, вы увидите, как легко создавать слайдеры, в которых элементы перемещаются из одной позиции в другую с помощью нашей библиотеки. Приступим!
Введение в новую библиотеку: PathSlider
Прежде чем перейти к коду, который заставит слайдер работать, давайте рассмотрим, как мы можем использовать библиотеку PathSlider, а также некоторые параметры, которые она предлагает.
Во-первых, наша библиотека зависит от anime.js, поэтому нам нужно будет включить ее в наш проект, прежде чем вы начнете использовать PathSlider. Кроме того, есть некоторые другие небольшие зависимости, которые должны быть приняты во внимание в коде HTML и CSS, чтобы все работало правильно, но мы будем рассматривать их по мере развития нашего слайдера.
Чтобы лучше понять некоторые параметры, предлагаемые библиотекой, предлагаю вам ознакомиться со следующим изображением, а также описанием каждого элемента ниже:
startLength (float или ‘center’): длина пути для начала позиционирования элементов. Это всегда будет позиция для активного элемента. Выбранный элемент будет перемещен сюда, а все остальные элементы будут перемещаться соответственно.
activeSeparation (float): Расстояние от активного элемента до соседних элементов.
paddingSeparation (float): Отступ от края в начале и в конце пути.
items: После того, как выбранный элемент будет позиционирован, все остальные элементы будут расположены на одинаковом расстоянии друг от друга, учитывая оставшееся пространство.
За исключением items, все описанные свойства могут быть предоставлены в качестве параметров при инициализации слайдера, что дает нам полную свободу в настройке слайдера под свои задачи. В дополнение к этим существуют и другие доступные параметры, с которыми вы можете ознакомиться в репозитории Github. И теперь мы готовы перейти к коду!
Структура HTML
Наш HTML-код будет довольно простым: просто контейнер (.path-slider), path SVG для перемещения элементов вдоль него и элементы. Важно отметить, что path SVG и элементы должны находиться внутри одного и того же контейнера, чтобы у нас не возникло проблем с позиционированием.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!-- Контейнер пути слайдера --> <div class="path-slider"> <!-- SVG-путь для перемещения элементов --> <svg width="460px" height="310px" viewBox="0 0 460 310"> <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path> </svg> <!-- Элементы слайдера --> <a href="#chat" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div> <div class="item__title"><h2>Chat</h2></div> </a> <a href="#alarmclock" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div> <div class="item__title"><h2>Alarm clock</h2></div> </a> <a href="#camera" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div> <div class="item__title"><h2>Camera</h2></div> </a> <a href="#envelope" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div> <div class="item__title"><h2>Envelope</h2></div> </a> <a href="#lightbulb" class="path-slider__item"> <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div> <div class="item__title"><h2>Light bulb</h2></div> </a> </div> |
Добавление необходимых стилей
Нам совсем не нужны стили, чтобы слайдер заработал, но, как правило, нам нужно, чтобы элементы позиционировались в центре пути. И, конечно же, мы добавим несколько других стилей, чтобы они выглядели красиво. Для простоты давайте рассмотрим только основные части:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// Ширина и высота круга $circle-width: 74px; $circle-height: 74px; // Стили для элементов слайдера, позиционирующие их абсолютно, в верхнем левом углу контейнера // Также мы центрируем их (см. отрицательные значения для `left` и `top`) // Они будут позиционироваться вдоль пути SVG позже с помощью Javascript .path-slider__item { position: absolute; // Извлекаем элемента из потока, и позволяем библиотеке задать корректную позицию left: - $circle-width / 2; // Половина ширины для центрирования top: - $circle-height / 2; // Половина высоты для центрирования } // Стили для круга элемента (контейнер icon) .item__circle { width: $circle-width; // Нужная ширина height: $circle-height; // Нужная высота } // Стили для выбранного элемента .path-slider__current-item { .item__circle { background-color: #4DA169; // Изменяем цвет фона круга для выбранного элемента transform: scale(1.5); // Увеличиваем круг для выбранного элемента } |
Как всегда, вы можете просмотреть полный код в репозитории Github.
Инициализация слайдера
Чтобы инициализировать слайдер, нам нужны только path и items. При желании мы можем передать объект с options для дополнительной настройки. Таким образом, мы можем заставить наш слайдер работать с помощью простого кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Задаем параметры var options = { startLength: 0, // Исходное позиционирование элемента слайдера в начале пути SVG duration: 3000, // длительность анимации (используется anime.js) stagger: 15, // задержка перед перемещение элемента, создающая красивый эффект easing: 'easeOutElastic', // функция замедления (используется anime.js) elasticity: 600, // фактор растяжения (используется anime.js) rotate: true // Это значение указывает, что элементы должны перемещаться в соответствии с изгибами пути SVG }; // Инициализация слайдера с использованием пути SVG, items и options new PathSlider('.path-slider__path', '.path-slider__item', options); |
Всего то! Работает, как ожидалось 🙂
Как вы можете видеть, мы прокомментировали все используемые параметры, поэтому вам легко будет понять, что означает каждый из них.
Библиотека инициализирует события click для каждого элемента в слайдере, поэтому, если мы нажмем любой из них, он будет выбран (анимирован в базовую позицию). Кроме того, если мы хотим добавить в слайдер другие элементы управления (разбивка на страницы, или кнопки Предыдущая / Следующая), у нас есть ряд полезных функций, которые мы можем вызывать для любого выбранного элемента:
selectPrevItem(): выбирает предыдущий элемент.
selectNextItem(): выбирает следующий элемент.
selectItem(index): выбирает любой элемент, используя соответствующий индекс.
Вы можете ознакомиться с подробной документацией обо всех возможных параметрах, а также остальными функциями библиотеки в репозитории Github.
Заключение
И это все, что нужно, чтобы получить привлекательный слайдер, показанный на рисунке ниже, в котором элементы перемещаются вдоль пути SVG:
Вы можете увидеть онлайн демо-версию, поэкспериментировать с кодом на Codepen или получить полный код на Github.
Итак, мы разработали простой слайдер с использованием замкнутого пути SVG и ряда параметров, предоставляемых нашей библиотекой. Но это не единственное, что мы можем сделать. В следующем руководстве мы сделаем слайдер немного более продвинутыми и ярким, а также использовать другие параметры, предоставляемые библиотекой.
Мы очень надеемся, что вам понравилась статья, и она окажется полезной вам!
Автор: Luis Manuel
Источник: //scotch.io/
Редакция: Команда webformyself.
