Создаем адаптивный слайдер с помощью SVG
- Статистика 2818 0
- Автор: RUDEBOX
- Раздел: Css
- Комментарии: Комментариев нет

На прошлой неделе мы экспериментировали с SVG анимированием содержания и сделали слайдер во всю страницу с интересными переходами. Сегодня мы используем ту же технику, чтобы создать адаптивный слайдер контента. На этот раз мы использовали SVG, чтобы непосредственно обрезать слайды изображения, чтобы показать промежуточный слой при перелистывании. Мы получаем простой, отзывчивую карусель с анимированными переходами SVG в качестве эффектов.
Такой слайдер станет доступным для визуального восприятия посетителя, а красивые переходы позволят привлечь взор посетителя к необходимой информации.
Шаг 1. HTML
HTML структура состоит из неупорядоченного списка (ul.cd слайдера), содержащий слайды, и два дополнительных элемента списка ( ul.cd-slider-navigation и ol.cd-slider-controls) для навигации слайдера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="cd-slider-wrapper"> <li class="visible"> <div class="cd-svg-wrapper"> <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 class="cd-svg-wrapper"> <svg viewBox="0 0 1400 800"> </svg> </div> </li> |
Каждый элемент списка внутри ul.cd-slider состоит с SVG, содержащего элемент <clipPath>
(используется для изменения области отсечения слайда изображения).
Шаг 2. CSS
Структура слайдера довольно простая: все слайды должны иметь непрозрачность: 0, в абсолютной позиции и размещаются один за одним (top: 0 и left:0). .Visible-класс добавляется для выбранного слайда (в конце отсечения анимации), чтобы сделать его видимым.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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 { height: 0; padding-bottom: 57.15%; } .cd-slider svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Примечание: мы должны были использовать отступы Hack, чтобы сделать SVG более отзывчивым (IE плохо работает с SVG, по этому нам пришлось учесть некоторые варианты).
Шаг 3. JS
Чтобы анимировать область отсечения слайда изображения, мы оживили 'D' атрибут <path> элемент внутри <clipPath>.
После того, как определены пути, мы добавили в .cd-slider и data-stepn атрибут (по одному для каждого слайда), равный 'D' атрибуту для определенного пути (легко восстановить его с помощью JavaScript). Затем мы использовали animate () метод, чтобы анимировать snap.svg.
1 2 3 4 5 6 |
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'); }); }); |
Кроме того, мы реализовали основную ползунок для галереи изображений (с клавиатуры и сенсорного салфетки навигации, предыдущий / следующий, и точки навигации).
Отправить ответ