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