Анимация фрагментов для слайд-шоу

Анимация фрагментов для слайд-шоу

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

Анимация для слайд шоу даст следующий конечный результат:

ДЕМО | Исходники

Анимация под управлением anime.js.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

Источником вдохновения эффектов послужил Dribbble Shift Animation от Alexander Saunki:

Как только я увидел это, я сразу захотел воссоздать такой эффект на своем недавно запущенном сайте lmgonzalves.com.

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

Приступая к работе с Pieces

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

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

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

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

Структура HTML

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

Стилизация слайдера

Для эффектов в слайдшоу понадобится добавить особые стили. Необходимо прятать изображения и текст – мы будем рисовать их заново с помощью библиотеки. Изображения должны быть фолбеком на случай отключения JS. С помощью пары медиа запросов необходимо определить адаптивность слайдера:

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

Использование Pieces для анимации слайдера

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

Далее необходимо определить переменные-индексы для обработки всех элементов, рисуемых на canvas:

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

Теперь у нас есть все опции для всех типов элементов. Соберем все и передадим в библиотеку Pieces!

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

Пока что мы еще ничего не рисуем, но уже готовы. Как создается новый объект Pieces:

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

Для показа и скрытия текущих элементов необходимо вызвать функции showItems и hideItems соответственно. Функции:

Для перемещения между слайдами мы написали эти функции:

Эти функции необходимо вызывать по клику на кнопки навигации или при нажатии стрелок на клавиатуре (лево и право):

Почти закончили :) Осталось реализовать адаптивность. Необходимо следить за событием resize, сохраняю текущую width окна и пересоздавая слайдер:

Теперь все! Надеемся, этот урок был полезен, и вы нашли вдохновение!

Автор: Luis Manuel

Источник: https://tympanus.net/

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Практика 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