Автор

Радиальный слайдер 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>.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

После некоторого перерыва наш блог возвращается в предыдущий ритм жизни, для того чтобы радовать своих посетителей новыми уроками. И первым уроком в данном месяце станет создание отличной сеточной галереи миниатюр с возможностью различной навигации, для этого мы будем использовать Grid Navigation. В примере мы рассмотрим сразу 10 вариантов переключения между страницами и реакции на прокручивание колесика мыши.


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

Простые гибкие таблицы цен, в 3 разных стилях и с оживленной анимацией при переключении на разные планы.


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close