Адаптивный слайдер с помощью SVG
Адаптивный слайдер с помощью SVG


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

Шаг 1. HTML
HTML структура состоит из неупорядоченного списка (ul.cd слайдера), содержащий слайды, и два дополнительных элемента списка ( ul.cd-slider-navigation и ol.cd-slider-controls) для навигации слайдера.

<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, содержащего элемент (используется для изменения области отсечения слайда изображения).

Шаг 2. CSS
Структура слайдера довольно простая: все слайды должны иметь непрозрачность: 0, в абсолютной позиции и размещаются один за одним (top: 0 и left:0). .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 {
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' атрибут элемент внутри .

После того, как определены пути, мы добавили в .cd-slider и data-stepn атрибут (по одному для каждого слайда), равный 'D' атрибуту для определенного пути (легко восстановить его с помощью javascript). Затем мы использовали animate() метод, чтобы анимировать snap.svg.

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');
});
});


Кроме того, мы реализовали основную ползунок для галереи изображений (с клавиатуры и сенсорного салфетки навигации, предыдущий / следующий, и точки навигации).

animated-svg-image-slider.zip [648,15 Kb] (cкачиваний: 5)
скачать dle 10.3фильмы бесплатно

CSS, css3 transition, html5, Веб-мастеру, галерея картинок
 Web
479 17.10.15