Простая адаптивная карусель с анимированными путями SVG, используемыми в качестве эффектов перехода.
Создание структуры
Структура HTML состоит из неупорядоченного списка. (ul.cd-slider), содержащие слайды и два дополнительных элемента списка ( ul.cd-slider-navigation и l.cd-slider-controls) для навигации слайдера.
Каждый элемент списка внутри ul.cd-slider состоит из svg, содержащего <clipPath> элемент (используется для изменения области отсечения изображения слайда) и <image> элемент (чей атрибут URL-адреса clip-path является <clipPath> id).
Вы можете посмотреть весь код Здесь (HTML & CSS и JavaScript)
Скачать Исходник
Исходный Код
И так далее Обработка событий
Чтобы анимировать область отсечения изображения слайда, мы анимировали атрибут 'd' элемента пути внутри <clipPath>.
Прежде всего, нам нужно было определить различные этапы нашей анимации: мы использовали тот же процесс, который описан в статье «Animated SVG Hero Slider article» (раздел «Обработка событий»); но в данном случае нам понадобилось всего 6 шагов (3 шага для анимации от слайда к следующему и еще 3 шага для анимации от слайда к предыдущему).
После определения путей мы добавили в .cd-slider a data-stepn
атрибут (по одному на каждый шаг), равный атрибуту 'd' определенного пути (чтобы легко получить его с помощью JavaScript).
Затем мы использовали animate() метод, предоставленный Snap.svg для анимации элемента пути.
МЫ реализовали базовый слайдер для галереи изображений (с навигацией по клавиатуре и касанием, переходом к предыдущему/следующему и точками).
Урок подготовил: Магомед Магомедов
Источник: Web design, made easier https://codyhouse.co/