Оригинальный SVG слайдер

demosourse

Простой слайдер с пред-просмотром изображений и преобразованием формы через SVG свойства.

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

Идея: Music player animation от Veronika Lykova.

Инструмент: Snap.svg

Изображения: Unsplash

Структура

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

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

<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 используются для отображения изображений расположенных по левую и правую стороны от активной картинки.

.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 используется для отображения активной подписи.

.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;
  // перехватываем клик по слайдеру
  this.slidesGallery.on('click', function(event){
    if( !$(this).hasClass('selected') ) {
      // находим следующий слайд и отображаем его
      var newSlideIndex = ( $(this).hasClass('left') )
        ? self.showPrevSlide(self.selectedSlide - 1)
        : self.showNextSlide(self.selectedSlide + 1);
    }
  });
}

Методы showPrevSlide и showNextSlide отвечают за отображение выбранного слайда; в них происходит добавление/удаление классов, рассмотренных выше.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/clipped-svg-slider/
Перевел: Станислав Протасевич
Урок создан: 24 Августа 2016
Просмотров: 19095
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^