Анимированный SVG слайдер изображений с помощью jQuery

Простая, отзывчивая карусель с анимированными дорожками SVG, используемыми в качестве эффектов перехода.

 

ДЕМО

ИСХОДНИКИ

 

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

 

Создание структуры

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

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

<div class="cd-slider-wrapper">
 <ul class="cd-slider" 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 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 content here -->
 </svg>
 </div> <!-- .cd-svg-wrapper -->
 </li>
 
 <!-- other list items here -->
 
 </ul> <!-- .cd-slider -->
 
 <ul class="cd-slider-navigation">
 <li><a href="#0" class="next-slide">Next</a></li>
 <li><a href="#0" class="prev-slide">Prev</a></li>
 </ul> <!-- .cd-slider-navigation -->
 
 <ol class="cd-slider-controls">
 <li class="selected"><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 -->

 

Добавление стиля

Структура слайдера довольно простая: все слайды имеют непрозрачность: 0, находятся в абсолютном положении и расположены один поверх другого (сверху: 0 и слева: 0). В выбранный слайд (в конце анимации обрезки) добавляется класс .visible, чтобы сделать его видимым, в то время как класс .is-animating добавлен в элемент li.visible во время анимации обрезки (z-index: 3), чтобы он находится над личным предметом).

.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>.
Прежде всего, нам нужно было определить разные этапы нашей анимации: мы использовали тот же процесс, описанный в статье Адаптивный / Анимированный SVG слайдер на jQuery (раздел обработки событий); но в этом случае нам понадобилось всего 6 шагов (3 шага для анимации с слайда на следующий и еще 3 шага для анимации с слайда на предыдущий).

После определения путей мы добавили в .cd-slider атрибут data-stepn (по одному для каждого шага), равный атрибуту 'd' определенного пути (чтобы легко получить его с помощью JavaScript).

Затем мы использовали метод animate(), предоставленный snap.svg (snapsvg.io/docs/#Element.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');
	});
});

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

 

Вот и всё!

---