В данном уроке мы хотим рассказать о том, как создать экспериментальный слайдер, который анимируется по фрагментах. Слайдер работает при помощи библиотеки «Pieces», которая была создана для достижения подобных эффектов, приложив при этом минимум усилий. Каждый элемент слайдера будет разделен на части, которые будут анимироваться по-разному, используя Pieces библиотеку. Фрагменты будут находится постоянно в движении, что позволит максимально оживить вас сайт.

 

Также, для достижения подобной анимации нам понадобилась библиотека anime.js. Давайте для начала начнем с идеи, и как к этому пришли.

Оригинальная идея

Источником вдохновения для такого рода эффектов стал разработанная Aleksandrom Saunki:

Для достижения желаемых эффектов мы разработали библиотеку, которую назвали “Pieces», поскольку она позволяет рисовать и анимировать текст, изображения и SVG через прямоугольные части. Итак, давайте посмотрим, как использовать эту библиотеку!

Работа с библиотекой Pieces

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

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

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

Шаг 1. HTML

Прежде чем начать писать код Javascript, давайте посмотрим, как мы определили контейнер HTML для нашего слайдера. Разметка довольно проста, так как у нас есть несколько слайдов с соответствующим изображением и текстом, элемент canvas для анимации  и кнопки для навигации по слайдеру.

C разметкой мы закончили, давайте перейдем теперь к стилям. На них мы остановимся более подробно.

Шаг 2. CSS

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

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

Шаг 3. JS

Начнем с определения некоторых переменных и получения информации о слайдере из DOM:

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

Теперь мы начнем определять параметры для каждого типа элемента (изображение, текст, номер и кнопка).

Точно так же мы определим параметры для других типов элементов. Если что-то не понятно, то оставляйте вопросы в комментариях:

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

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

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

Так, чтобы показать и скрыть текущие элементы нужно реализовать вызов функций showItems и hideItems. Мы реализовали их следующим образом:

И, наконец, для навигации по слайдам мы определили cледующие функции:

Поэтому нам нужно вызвать эти функции, если нажаты кнопки навигации или некоторые клавиши со стрелками (влево или вправо):

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

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

Вот и все. Готово!