Автор

08 06.2017
Радиальный слайдер SVG на jQuery

Радиальный слайдер SVG на jQuery


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

 

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

 

Во время просмотра Dribbble в мы наткнулись на эту интересную анимацию, созданную Токито. Основная идея - показать небольшой предварительный просмотр следующего слайда, а затем масштабировать его, когда пользователь взаимодействует с ним.

Чтобы создать этот эффект, элементы отсечения и маскировки SVG звучали как идеальные союзники.

Давайте разберемся поэтапно: прежде всего, нам нужно было показать предварительный просмотр как предыдущих, так и следующих слайдов. Поэтому для каждого слайда нам понадобилось 2 пути: круглый элемент для обрезания части изображения, видимой в начале (навигационный CTA), и второго элемента окружности, который охватывает весь слайдер (полученный путем увеличения радиуса первого Элемент окружности).

Вот предварительный просмотр двух путей, созданных в Illustrator, на 2 отдельных монтажных платах, а затем экспортированных в виде файлов SVG. Вы найдете эти векторы внутри исходных файлов.

Используя элемент clipPath, вы можете определить видимую область изображения. Затем, очевидно, если вы анималируете элемент clipPath, вы анималируете видимую область изображения, к которому вы применяете клип.

Теперь сложная часть: анимируя элемент круга, с которым взаимодействует пользователь, мы покрываем весь слайдер, включая противоположный элемент round / navigation. Чтобы исправить это, мы использовали элемент маски SVG: в основном мы устанавливаем область, в которой элемент анимированного круга не будет виден, несмотря ни на что. Эта маска равна размеру элемента round / navigation, который мы не хотим покрывать.

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

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

 

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

Структура HTML состоит из двух неупорядоченных списков: ul.cd-radial-slider для слайдов и ul.cd-radial-slider-navigation для навигации слайдера.

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

Дополнительная .cd-round-mask используется для обертывания двух элементов <mask>.

<div class="cd-radial-slider-wrapper">
<ul class="cd-radial-slider" data-radius1="60" data-radius2="1364" data-centerx1="110" data-centerx2="1290">
<li class="visible">
<div class="svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Animated SVG</title>
<defs>
<clipPath id="cd-image-1">
<circle id="cd-circle-1" cx="110" cy="400" r="1364"/>
</clipPath>
</defs>

<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
</svg>
</div> <!-- .svg-wrapper -->

<div class="cd-slider-content">
<div class="wrapper">
<div>
<h2>Slide #1 Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<a href="#0" class="cd-btn">Learn More</a>
</div>
</div>
</div> <!-- .cd-slider-content -->
</li>

<li class="next-slide">
<!-- ... -->
</li>

<!-- additional slides here -->

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

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

<div class="cd-round-mask">
<svg viewBox="0 0 1400 800">
<defs>
<mask id="cd-left-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
<path fill="white" d="M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z"/>
</mask>

<mask id="cd-right-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
<path fill="white" d="M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z"/>
</mask>
</defs>
</svg>
</div>
</div> <!-- .cd-radial-slider-wrapper -->

 

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

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

Два дополнительных класса были использованы для анимации круглых элементов навигации: класс .scale-down, чтобы скрыть предварительный просмотр слайдов при выборе нового слайда (эффект масштабирования) и класс .move-up, используемый для создания эффекта щелчка, когда Нажимается один из слайд-превью.

.cd-radial-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: transform .2s;
}
.cd-radial-slider > li.visible {
  position: relative;
  opacity: 1;
}
.cd-radial-slider > li.is-animating, 
.cd-radial-slider > li.prev-slide, 
.cd-radial-slider > li.next-slide {
  opacity: 1;
}
.cd-radial-slider > li.is-animating {
  z-index: 2;
}
.cd-radial-slider > li.scale-down, 
.cd-radial-slider > li.move-up {
  z-index: 3;
}
.cd-radial-slider > li.move-up {
  /* class added to the navigation round element when clicked - used to create the click effect */
  animation: cd-clicked .2s;
}
.cd-radial-slider > li.scale-down {
  /* class added to the navigation round element to create the scale down effect  */
  transform: scale(0);
}
.cd-radial-slider > li.next-slide {
  /* for the scale-down/click effect - change the transform origin so that it is the center of the navigation round element */
  transform-origin: 92.14% 50%;
}
.cd-radial-slider > li.prev-slide {
  transform-origin: 7.86% 50%;
}

 

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

Чтобы реализовать радиальный слайдер SVG, мы создали объект radialSlider и использовали функцию bindEvents для присоединения обработчиков событий для перехода к навигации ползунка:

var radialSlider = function(element) {
	this.element = element;
	this.slider = this.element.find('.cd-radial-slider');
	this.slides = this.slider.children('li');
	//...
	this.navigation = this.element.find('.cd-radial-slider-navigation');
	//...
	this.bindEvents();
} 
 
radialSlider.prototype.bindEvents = function() {
	var self = this;
 
	//update visible slide when clicking the navigation round elements
	this.navigation.on('click', function(event){
		if( !self.animating ) {
			self.animating =  true;
			event.preventDefault();
			var direction = ( $(event.target).hasClass('next') ) ? 'next' : 'prev';
			//update radialSlider index properties
			self.updateIndexes(direction);
			//show new slide
			self.updateSlides(direction);
		}
	});
}

Чтобы анимировать область отсечения слайд-изображений, мы анимировали атрибут 'r' элемента <circle> внутри <clipPath>.
Мы добавили в .cd-radial-slider элемент data-radius1 и атрибут data-radius2, чтобы легко получить начальные и конечные значения радиуса, и центр данных x и центр данных x для центра <circle> (два разных значения Для следующего и предыдущего предварительного просмотра слайдов).
Затем мы использовали метод animate(), предоставляемый Snap.svg для анимации элемента окружности.

clipPathVisible.animate({'r': radius2}, duration, customMinaAnimation, function(){
	//callback function here
});

Функция ослабления представляет собой пользовательскую функцию кубического безье; К сожалению, это то, что по умолчанию недоступно в Snap.svg, но вы можете создать собственную функцию синхронизации из своего пользовательского кубического безье (вот пост StackOverflow, которое подробно описывает его).

Чтобы применить маску к видимому слайду, вместо этого мы изменили атрибут стиля элемента svg <image>. Например, чтобы замаскировать слайд так, чтобы был показан следующий просмотр слайдов, мы использовали:

this.slides.eq(this.visibleIndex).find('image').attr('style', 'mask: url(#'+this.rightMask.attr('id')+')');

Где this.slides.eq(this.visibleIndex) - видимый слайд, а this.rightMask.attr('id') - это идентификатор элемента <mask>.

 

Вот и всё!


vk.com/club.ssdru

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


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

19 06.2015
Радиальный слайдер SVG на jQuery

Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах — навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.


03 07.2013
Радиальный слайдер SVG на jQuery

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


24 03.2013
Радиальный слайдер SVG на jQuery

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


13 03.2013
Радиальный слайдер SVG на jQuery

Из многих CMS мной была выбрана бесплатная система управления сайтом DLE. Система очень гибкая и удобная для индивидуального дизайна, причем любой сложности. Единственным недостатком этой системы, это стандартная блочная система, а точнее все последующие страницы сайта одинаковые по формам, блокам, располагающихся справа или слева, и весь веб дизайн сайта расположен в одном файле,  тоесть в шаблоне дизайна.  

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close