Анимация элементов вдоль SVG-пути: Введение в PathSlider

Анимация элементов вдоль SVG-пути: Введение в PathSlider

От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это :) И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений.

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

Анимация элементов вдоль SVG-пути: Введение в PathSlider

Если вы будете следовать этому руководству, вы увидите, как легко создавать слайдеры, в которых элементы перемещаются из одной позиции в другую с помощью нашей библиотеки. Приступим!

Введение в новую библиотеку: PathSlider

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Во-первых, наша библиотека зависит от anime.js, поэтому нам нужно будет включить ее в наш проект, прежде чем вы начнете использовать PathSlider. Кроме того, есть некоторые другие небольшие зависимости, которые должны быть приняты во внимание в коде HTML и CSS, чтобы все работало правильно, но мы будем рассматривать их по мере развития нашего слайдера.

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

Анимация элементов вдоль SVG-пути: Введение в PathSlider

startLength (float или ‘center’): длина пути для начала позиционирования элементов. Это всегда будет позиция для активного элемента. Выбранный элемент будет перемещен сюда, а все остальные элементы будут перемещаться соответственно.

activeSeparation (float): Расстояние от активного элемента до соседних элементов.

paddingSeparation (float): Отступ от края в начале и в конце пути.

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

За исключением items, все описанные свойства могут быть предоставлены в качестве параметров при инициализации слайдера, что дает нам полную свободу в настройке слайдера под свои задачи. В дополнение к этим существуют и другие доступные параметры, с которыми вы можете ознакомиться в репозитории Github. И теперь мы готовы перейти к коду!

Структура HTML

Наш HTML-код будет довольно простым: просто контейнер (.path-slider), path SVG для перемещения элементов вдоль него и элементы. Важно отметить, что path SVG и элементы должны находиться внутри одного и того же контейнера, чтобы у нас не возникло проблем с позиционированием.

Добавление необходимых стилей

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Как всегда, вы можете просмотреть полный код в репозитории Github.

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

Чтобы инициализировать слайдер, нам нужны только path и items. При желании мы можем передать объект с options для дополнительной настройки. Таким образом, мы можем заставить наш слайдер работать с помощью простого кода:

Всего то! Работает, как ожидалось :)

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

Библиотека инициализирует события click для каждого элемента в слайдере, поэтому, если мы нажмем любой из них, он будет выбран (анимирован в базовую позицию). Кроме того, если мы хотим добавить в слайдер другие элементы управления (разбивка на страницы, или кнопки Предыдущая / Следующая), у нас есть ряд полезных функций, которые мы можем вызывать для любого выбранного элемента:

selectPrevItem(): выбирает предыдущий элемент.

selectNextItem(): выбирает следующий элемент.

selectItem(index): выбирает любой элемент, используя соответствующий индекс.

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

Заключение

И это все, что нужно, чтобы получить привлекательный слайдер, показанный на рисунке ниже, в котором элементы перемещаются вдоль пути SVG:

Анимация элементов вдоль SVG-пути: Введение в PathSlider

Вы можете увидеть онлайн демо-версию, поэкспериментировать с кодом на Codepen или получить полный код на Github.

Итак, мы разработали простой слайдер с использованием замкнутого пути SVG и ряда параметров, предоставляемых нашей библиотекой. Но это не единственное, что мы можем сделать. В следующем руководстве мы сделаем слайдер немного более продвинутыми и ярким, а также использовать другие параметры, предоставляемые библиотекой.

Мы очень надеемся, что вам понравилась статья, и она окажется полезной вам!

Автор: Luis Manuel

Источник: https://scotch.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree