SVG слайдер изображений

demosourse

Простая, адаптивная карусель изображений.

Ранее мы не раз экспериментировали с изображениями. Сегодня мы применим накопленный опыт и создадим адаптивный слайдер изображений.

Структура

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

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

<div>
	<ul 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>
			<div>
				<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>
				<svg viewBox="0 0 1400 800">
					<!-- svg content here -->
				</svg>
			</div> <!-- .cd-svg-wrapper -->
		</li>

		<!-- other list items here -->

	</ul> <!-- .cd-slider -->

	<ul>
		<li><a href="#0">Next</a></li>
		<li><a href="#0">Prev</a></li>
	</ul> <!-- .cd-slider-navigation -->

	<ol>
		<li><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 -->

Стили

Структура слайдера предельно проста: к каждому слайду выставлен opacity: 0, позиция: absolute (top: 0 и left:0). Класс .visible будет добавляться к активному слайду, а .is-animating присваивается к тому элементу который анимируется в данный момент времени (z-index: 3, что поместит поверх элемента li.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 {
  /* 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>.

Далее определим значение атрибута data-stepn элемента .cd-slider, равный значению атрибута 'd' (чтобы было проще взаимодействовать через JavaScript).

Сама анимация реализуется при вызове функции 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');
	});
});

Вдобавок мы реализовали перелистывание изображений посредством нажатия клавиш, а также тач-жестов.

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

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

^ Наверх ^