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

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

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

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

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

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

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

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

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

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

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

Структура HTML

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

<!-- Контейнер слайдера -->
<div class="path-slider">
 <!-- Элементы  слайдера -->
 <a href="#" class="path-slider__item path-slider__item--1"><div class="item__circle"></div></a>
 <a href="#" class="path-slider__item path-slider__item--2"><div class="item__circle"></div></a>
 <a href="#" class="path-slider__item path-slider__item--3"><div class="item__circle"></div></a>
 <a href="#" class="path-slider__item path-slider__item--4"><div class="item__circle"></div></a>
 <a href="#" class="path-slider__item path-slider__item--5"><div class="item__circle"></div></a>
</div>

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

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

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

// Слайдер будет полноэкранным
// `background-image` будет задаваться с помощью Javascript
.path-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
}

// Нам также нужен этот дополнительный элемент (генерируемый через Javascript) чтобы выводить изображения плавно
.path-slider__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
}

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

// Определение изображений

.path-slider__item--1 .item__circle {
  background-image: url("../images/img1.jpg");
}

// ... Остальные определения `background-image` для каждого элемента

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

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

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

// Создаем элементы SVG и path и вставляем их в DOM

var svgNS = 'http://www.w3.org/2000/svg';
var svgEl = document.createElementNS(svgNS, 'svg');

var pathEl = document.createElementNS(svgNS, 'path');
// Функция `getSinPath` возвращает `path` в формате String
pathEl.setAttribute('d', getSinPath());
pathEl.setAttribute('class', 'path-slider__path');

svgEl.appendChild(pathEl);
document.body.appendChild(svgEl);

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

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

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

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

Узнать подробнее
// Изменение `background-image`
// Сначала сохраняем вычисляемое значение `background` каждого элемента, как оно определено в CSS
// Когда элемент выбирается, `background` устанавливается соответственно

var items = document.querySelectorAll('.path-slider__item');
var images = [];
for (var j = 0; j < items.length; j++) {
 images.push(getComputedStyle(items[j].querySelector('.item__circle')).getPropertyValue('background-image'));
}

var imgAnimation;
var lastIndex;
var setImage = function (index) {
 if (imgAnimation) {
 imgAnimation.pause();
 sliderContainer.style['background-image'] = images[lastIndex];
 sliderContainerBackground.style['opacity'] = 0;
 }
 lastIndex = index;
 sliderContainerBackground.style['background-image'] = images[index];
 imgAnimation = anime({
 targets: sliderContainerBackground,
 opacity: 1,
 easing: 'linear'
 });
};

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

var sliderContainer = document.querySelector('.path-slider');
var sliderContainerBackground = document.createElement('div');
sliderContainerBackground.setAttribute('class', 'path-slider__background');
setImage(0);
sliderContainer.appendChild(sliderContainerBackground);

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

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

var options = {
 startLength: 'center',
 paddingSeparation: 100,
 easing: 'easeOutCubic',
 begin: function (params) {
 // Когда элемент выбирается, тогда мы устанавливаем `background` соответственно
 if (params.selected) {
 setImage(params.index);
 }
 }
};

var slider = new PathSlider(pathEl, '.path-slider__item', options);

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

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

// Пересоздаем `path` и обновляем позицию элементов при событии `resize` (адаптивное поведение)

window.addEventListener('resize', function() {
 pathEl.setAttribute('d', getSinPath());
 slider.updatePositions();
});

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

Заключение

И все готово! Мы снова реализовали возможности, предлагаемые 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree