SVG слайдер изображений
Простая, адаптивная карусель изображений.
Ранее мы не раз экспериментировали с изображениями. Сегодня мы применим накопленный опыт и создадим адаптивный слайдер изображений.
Структура
HTML структура состоит из ненумерованного списка (ul.cd-slider
), в который поместим слайды, и два дополнительных элемента списка (ul.cd-slider-navigation
и ol.cd-slider-controls
) для элементов навигации.
Каждый элемент списка ul.cd-slider
будет состоять из svg <clipPath>
(для изменения области обрезки слайд-изображения) и элемента <image>
(идентификатор атрибута обрезаемого элемента <clipPath>
).
<div> <ul data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z"> <li> <div> <svg viewBox="0 0 1400 800"> <title>Aimated SVG</title> <defs> <clipPath id="cd-image-1"> <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/> </clipPath> </defs> <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image> </svg> </div> <!-- .cd-svg-wrapper --> </li> <li> <div> <svg viewBox="0 0 1400 800"> <!-- svg content here --> </svg> </div> <!-- .cd-svg-wrapper --> </li> <!-- other list items here --> </ul> <!-- .cd-slider --> <ul> <li><a href="#0">Next</a></li> <li><a href="#0">Prev</a></li> </ul> <!-- .cd-slider-navigation --> <ol> <li><a href="#0"><em>Item 1</em></a></li> <li><a href="#0"><em>Item 2</em></a></li> <!-- other list items here --> </ol> <!-- .cd-slider-controls --> </div> <!-- .cd-slider-wrapper -->
Стили
Структура слайдера предельно проста: к каждому слайду выставлен opacity: 0
, позиция: absolute
(top: 0
и left:0
). Класс .visible
будет добавляться к активному слайду, а .is-animating
присваивается к тому элементу который анимируется в данный момент времени (z-index: 3
, что поместит поверх элемента li.visible
).
.cd-slider > li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; } .cd-slider > li.visible { position: relative; z-index: 2; opacity: 1; } .cd-slider > li.is-animating { z-index: 3; opacity: 1; } .cd-slider .cd-svg-wrapper { /* using padding Hack to fix bug on IE - svg height not properly calculated */ height: 0; padding-bottom: 57.15%; } .cd-slider svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Обработка событий
Для реализации анимации мы задействуем атрибут 'd'
элемента <path>
, входящего в <clipPath>
.
Далее определим значение атрибута data-stepn
элемента .cd-slider
, равный значению атрибута 'd'
(чтобы было проще взаимодействовать через JavaScript).
Сама анимация реализуется при вызове функции animate()
.
clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){ clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){ oldSlide.removeClass('visible'); newSlide.addClass('visible').removeClass('is-animating'); }); });
Вдобавок мы реализовали перелистывание изображений посредством нажатия клавиш, а также тач-жестов.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/animated-svg-image-slider/
Перевел: Станислав Протасевич
Урок создан: 22 Апреля 2017
Просмотров: 9468
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.