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

Статистика 1292 0
Автор: RUDEBOX
Раздел: Css
Комментарии: Комментариев нет
Теги: HTML5

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

На прошлой неделе мы экспериментировали с SVG анимированием содержания и сделали слайдер во всю страницу с интересными переходами. Сегодня мы используем ту же технику, чтобы создать адаптивный слайдер контента. На этот раз мы использовали SVG, чтобы непосредственно обрезать слайды изображения, чтобы показать промежуточный слой при перелистывании. Мы получаем простой, отзывчивую карусель с анимированными переходами SVG в качестве эффектов.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

&lt;div class=&quot;cd-slider-wrapper&quot;&gt;
&lt;li class=&quot;visible&quot;&gt;
&lt;div class=&quot;cd-svg-wrapper&quot;&gt;
&lt;svg viewBox=&quot;0 0 1400 800&quot;&gt;
&lt;title&gt;Aimated SVG&lt;/title&gt;
&lt;defs&gt;
&lt;clipPath id=&quot;cd-image-1&quot;&gt;
&lt;path id=&quot;cd-changing-path-1&quot; d=&quot;M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z&quot;/&gt;
&lt;/clipPath&gt;
&lt;/defs&gt;
&lt;image height='800px' width=&quot;1400px&quot; clip-path=&quot;url(#cd-image-1)&quot; xlink:href=&quot;img/img-1.jpg&quot;&gt;&lt;/image&gt;
				&lt;/svg&gt;
&lt;/div&gt; &lt;!-- .cd-svg-wrapper --&gt;
&lt;/li&gt;&lt;li&gt;
&lt;div class=&quot;cd-svg-wrapper&quot;&gt;
&lt;svg viewBox=&quot;0 0 1400 800&quot;&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;/li&gt;

<title>Aimated SVG</title>

<defs>

</clipPath>

</defs>

</svg>

</div>

</li><li>

</svg>

</div>

</li>

Каждый элемент списка внутри ul.cd-slider состоит с SVG, содержащего элемент <clipPath> (используется для изменения области отсечения слайда изображения).

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

Шаг 2. CSS

Структура слайдера довольно простая: все слайды должны иметь непрозрачность: 0, в абсолютной позиции и размещаются один за одним (top: 0 и left:0). .Visible-класс добавляется для выбранного слайда (в конце отсечения анимации), чтобы сделать его видимым.

.cd-slider &gt; li {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
.cd-slider &gt; li.visible {
position: relative;
z-index: 2;
opacity: 1;
}
.cd-slider &gt; 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%;
}

.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.

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

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

});

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