Автор

01 10.2017
Анимированный SVG слайдер

Анимированный SVG слайдер


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

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

30 10.2018
Анимированный SVG слайдер

Кнопки - это наиболее важные интерактивные компоненты, используемые пользователями для выполнения действий. Проектирование кнопок означает создание инструментария, позволяющего взаимодействовать с интерфейсом.


23 04.2013
Анимированный SVG слайдер

Как вы возможно заметили, мы достаточно много уделяем внимания по созданию различных галерей для сайта, и это совсем не странно, ведь галерей достаточно много, и они весьма специфические. В данном уроке мы рассмотрим как создать адаптированную галерею с каруселью миниатюр для сайта, с помощью плагина jquery. Галерея будет подстраиваться под размер окна браузера, также можно будет отключить или включить карусель миниатюр. Достаточно удобно можно осуществлять навигацию с помощью клавиатуры.


24 12.2015
Анимированный SVG слайдер

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


12 06.2013
Анимированный SVG слайдер

Версия скрипта от TRANE73. Скрипт показывает время существования сайта, с указанной вами даты. Сам по себе скрипт простой, но он удобный и небольшой. В зависимости от даты меняются слова например сайт существует 2 дня 7 дней 101 день. Если вам надоело каждый день менять цифры, то просто установите этот скрипт:


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close