От автора: в предыдущей статье мы представили новую библиотеку, с помощью которой делается анимация элементов сайта вдоль SVG-пути — PathSlider. Кроме того, мы реализовали использование этой библиотеки и разработали простой слайдер. В этом руководстве мы рассмотрим еще два примера, иллюстрирующих возможности нашей библиотеки и SVG-пути.
Например, мы разработаем еще один слайдер с использованием замкнутого SVG-пути, как в предыдущем руководстве, но с некоторыми дополнительными эффектами:
Мы также хотели сделать что-то более оригинальное, и поэтому создали полноэкранный и адаптивный слайдер изображений, используя на этот раз разомкнутый путь SVG, генерируемый автоматически с помощью Javascript:
Как вы можете видеть, первый из этих слайдеров очень похож на тот, что был в предыдущей статье, мы только добавили некоторые эффекты. Кроме того, мы создали слайдер изображений. Однако код этого первого слайдера можно также найти в репозитории 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, а также код, необходимый для плавного переключения изображений каждый раз, когда мы выбираем элемент:
// Изменение `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.