基于SVG clipPath的预览图变形特效幻灯片 |幻灯片和轮播图|下载

简要教程

这是一款基于SVG clipPath的预览图变形特效幻灯片。该幻灯片特效结合SVG和clipPath元素制作路径变形动画，在幻灯片前后切换时，前后预览图平滑的变形过渡到屏幕中间。

该幻灯片特效的SVG动画使用Snap.svg来制作。

使用方法

HTML结构

该幻灯片特效的HTML结构包含3个无序列表：一个是ul.gallery，一个ul.navigation是前后导航缩略图，ul.caption是各个图片的描述信息。

在ul.gallery中的每一个列表项由一个.svg-wrapper元素来包裹一个元素。在元素中又包含一个元素，它用于改变图片的剪裁区域。还有一个元素，它的clip-path属性的URL指向元素的ID。最后还有一个元素，它的xlink:href属性指向元素中路径的ID。


  
    
      
        
          
        
 
      
 
      
        
          
        
 
      
 
      
    
    
    
      
        Prev
        Next
      
    
  
 
  
    Lorem ipsum dolor
    Consectetur adipisicing elit

CSS样式

默认情况下，ul.gallery中的所有列表元素都使用绝对定位方式，并且透明度都设置为0，并使用translateX()函数将它们移动到右边，同时将它们缩小为0.4倍。

.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 class类，该class类将图片移动会屏幕的中间，同时对它进行放大操作。

.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 class用于在当前图片的左右两侧显示前后预览图片。.left class的另一个作用是将预览图片移动到左侧。

.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;
}

当一个新的幻灯片slide被选择的时候，元素用于剪裁图片，如果是当前选择的图片，则完全显示，左右两侧的预览图则只显示一部分。

另外，上面的这些class类页用于控制图片的描述信息的显示和隐藏。默认情况下，图片的描述信息也是被隐藏和移动到屏幕的右侧。.selected class用于显示当前被选择的图片的描述信息，.left class用于隐藏描述信息，并将它们移动到屏幕的左侧。

.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);
}

JavaScript

该幻灯片特效的jQuery代码中创建了一个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用于显示前一个和下一个幻灯片。这些函数用于为指定的幻灯片图片的描述信息添加和移除相应的class类，并修改元素中的元素的d属性，用来对图片制作路径剪裁。