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

Простой слайдер с морфированием изображений предварительного просмотра, анимированных с использованием свойств SVG.

В файле для скачивания находятся 2 варианта слайдера!

 

ДЕМО
ИСХОДНИКИ

 

В нашем блоге мы опубликовали много экспериментов по SVG! Что действительно мощно в SVG, это возможность комбинировать анимацию с элементом clipPath. 

 

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

Структура HTML состоит из трех неупорядоченных списков: ul.gallery и ul.navigation для изображений слайдера и навигации, а также ul.caption для подписи к изображениям.

Каждый элемент списка внутри ul.gallery состоит из элемента .svg-wrapper, который обертывает <svg>, содержащий элемент <clipPath> (используемый для изменения области отсечения слайд-изображения), элемент <image> (клип- атрибут url пути является идентификатором <clipPath>) и элементом <use> (чей атрибут xlink: href является идентификатором <clipPath>), используемым для создания слоя, покрывающего слайд-изображения не в центре.

<div class="cd-svg-clipped-slider" data-selected="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z" data-lateral="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z">
<div class="gallery-wrapper">
<ul class="gallery">
<li class="left">
<div class="svg-wrapper">
<svg viewBox="0 0 800 800">
<title>Animated SVG</title>
<defs>
<clipPath id="cd-image-1">
<path id="cd-morphing-path-1" d="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
</clipPath>
</defs>

<image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="img/img-01.jpg"></image>
<use xlink:href="#cd-morphing-path-1" class="cover-layer" />
</svg>
</div> <!-- .svg-wrapper -->
</li>

<li class="selected">
<div class="svg-wrapper">
<svg viewBox="0 0 800 800">
<title>Animated SVG</title>
<defs>
<clipPath id="cd-image-2">
<path id="cd-morphing-path-2" d="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z"/>
</clipPath>
</defs>

<image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="img/img-02.jpg"></image>
<use xlink:href="#cd-morphing-path-2" class="cover-layer" />
</svg>
</div> <!-- .svg-wrapper -->
</li>

<!-- other slides here -->
</ul>

<nav>
<ul class="navigation">
<li><a href="#0" class="prev">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul>
</nav>
</div>

<ul class="caption">
<li class="left">Lorem ipsum dolor</li>
<li class="selected">Consectetur adipisicing elit</li>
<!-- other captions here -->
</ul>
</div> <!-- .cd-svg-clipped-slider -->

 

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

По умолчанию все элементы списка внутри ul.gallery имеют абсолютную позицию, непрозрачность нуля и перемещаются вправо и уменьшаются.

.cd-svg-clipped-slider .gallery li {
  /* slider images */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 25%;/* (100% - width)/2 */
  width: 50%;
  height: 100%;
  opacity: 0;
  transform: translateX(75%) scale(0.4);
  transition: opacity .3s, transform .3s ease-in-out;
}

Затем класс .selected используется для перемещения выбранного изображения обратно в центр и его масштабирования.

.cd-svg-clipped-slider .gallery li.selected {
  /* slide in the center */
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1);
}

Классы .left и .right используются для отображения изображений предварительного просмотра с обеих сторон выбранного изображения; класс .left также используется для перемещения предварительного просмотра изображения влево.

.cd-svg-clipped-slider .gallery li.left {
  /* slides on the left */
  transform: translateX(-75%) scale(0.4);
}
.cd-svg-clipped-slider .gallery li.left, 
.cd-svg-clipped-slider .gallery li.right {
  /* .right -> slide visible on the right */
  z-index: 2;
  opacity: 1;
}

Когда выбран новый слайд, элемент <path>, используемый для клипа изображения слайдов, анимируется, чтобы показать другую часть изображения (все изображение, если слайд является .selected, или просто раздел для .left.right изображения).

Те же классы также используются для контроля видимости / положения подтипов изображения. По умолчанию все подписи скрыты и перемещены вправо; класс .selected используется для отображения выбранного заголовка и перемещения его обратно в центр, в то время как класс .left используется, чтобы скрыть его и переместить его влево.

.cd-svg-clipped-slider .caption li {
  /* slide titles */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  transform: translateX(100px);
  opacity: 0;
  transition: opacity .3s, transform .3s ease-in-out;
}
.cd-svg-clipped-slider .caption li.selected {
  /* slide visible in the center */
  z-index: 2;
  position: relative;
  transform: translateX(0);
  opacity: 1;
}
.cd-svg-clipped-slider .caption li.left {
  /* slide hidden on the left */
  transform: translateX(-100px);
}

 

Обработка событий

Чтобы реализовать этот слайдер, мы создали объект svgClippedSlider и использовали метод bindEvents для присоединения обработчиков событий для перехода к навигации ползунка.

function svgClippedSlider(element) {
	this.element = element;
	this.slidesGallery = this.element.find('.gallery').children('li');
	this.slidesCaption = this.element.find('.caption').children('li');
	this.slidesNumber = this.slidesGallery.length;
	this.selectedSlide = this.slidesGallery.filter('.selected').index();
	// ....
 
	this.bindEvents();
}
 
svgClippedSlider.prototype.bindEvents = function() {
	var self = this;
	//detect click on one of the slides
	this.slidesGallery.on('click', function(event){
		if( !$(this).hasClass('selected') ) {
			//determine new slide index and show it
			var newSlideIndex = ( $(this).hasClass('left') )
				? self.showPrevSlide(self.selectedSlide - 1)
				: self.showNextSlide(self.selectedSlide + 1);
		}
	});
}

Методы showPrevSlide и showNextSlide обеспечивают отображение выбранного слайда; эти функции используются для добавления / удаления соответствующих классов из слайд-изображений и титров и для анимации атрибута 'd' элемента <path> внутри <clipPath>, используемого для клипа слайд-изображения.

 

Вот и всё!


🔖 Выбор по тегам ×

Top