Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

Анимация других элементов вдоль SVG-пути с использованием JavaScript

От автора: в предыдущей статье мы представили новую библиотеку, с помощью которой делается анимация элементов сайта вдоль SVG-пути — PathSlider. Кроме того, мы реализовали использование этой библиотеки и разработали простой слайдер. В этом руководстве мы рассмотрим еще два примера, иллюстрирующих возможности нашей библиотеки и SVG-пути.

Например, мы разработаем еще один слайдер с использованием замкнутого SVG-пути, как в предыдущем руководстве, но с некоторыми дополнительными эффектами:

Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

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

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

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

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

Анимация других элементов вдоль SVG-пути с использованием JavaScript (Часть 2)

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

Структура HTML

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

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

Добавление стилей

Поскольку на этот раз наш слайдер будет полноэкранным, мы должны добавить некоторые необходимые стили:

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

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

Задействуем Javascript

Первое, что мы сделаем, это вставим элемент path, который нам нужен, чтобы перемещать элементы слайдера вдоль него:

Как вы могли заметить, мы создали path, используя функцию getSinPath, которая отвечает за возврат path в формате String с учетом размеров экрана и некоторых других параметров. Мы разместили эту функцию в отдельном файле для лучшей организации — вы можете увидеть ее реализацию, а также краткое описание доступных параметров в репозитории Github.

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

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

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

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

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

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

Как мы объяснили в предыдущем руководстве, по умолчанию библиотека PathSlider добавляет прослушиватели событий для событий click, поэтому нам не о чем беспокоиться. Все, что нам нужно сделать, это правильно переключить изображения, используя функцию setImage.

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

Таким образом, наш слайдер будет отлично смотреться в любых размерах экрана :)

Заключение

И все готово! Мы снова реализовали возможности, предлагаемые SVG-путями для разработки красивых и функциональных компонентов. Вы можете просмотреть демо-версии здесь:

Поэкспериментируйте с кодом на CodePen:

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

Автор: Luis Manuel

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

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

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

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

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

Рисуй крутые сайты, получай заказы и путешествуй!

Пройди практический видео курс по веб-дизайну

Получить

Метки:

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

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

Комментарии 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