基于SVG剪裁路径和遮罩的jQuery幻灯片特效

这是一款基于SVG clipPath（剪裁路径）和mask遮罩元素的炫酷jQuery幻灯片特效。该幻灯片利用圆形的前后导航按钮，在用户点击按钮时，按钮会平滑放大，显示出下一张幻灯片。

使用方法

HTML结构

该幻灯片的HTML结构包括2个部分：ul.cd-radial-slider是幻灯片的slides，ul.cd-radial-slider-navigation是导航按钮。

ul.cd-radial-slider中的列表项又包括2个部分：.svg-wrapper是一个SVG容器，它里面有一个<clipPath>元素，用于改变幻灯片的剪裁区域。另外一个是<image>元素，它的clip-path属性是<clipPath>元素的ID。

另外使用.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 -->              
                

CSS样式

幻灯片的样式也非常简单：所有的slide的透明度都为0，定位方式使用绝对定位，它们通过left:0;top:0;设置为相互堆叠在一起，.visible class类会被添加到当前选择的slide上，使该slide的定位方式从绝对定位变为相对定位，同时在剪裁动画期间，会为slide添加一个.is-animating class类，用于改变它的z-index值。

有2个辅助class类用于制作圆形导航动画：.scale-down class用于在新的slide被选择的时候，隐藏前一个slide。.move-up class用于导航被点击的时候创建点击效果。

.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 {
  animation: cd-clicked .2s;
}
.cd-radial-slider > li.scale-down {
  transform: scale(0);
}
.cd-radial-slider > li.next-slide {
  transform-origin: 92.14% 50%;
}
.cd-radial-slider > li.prev-slide {
  transform-origin: 7.86% 50%;
}                  
                

JavaScript

在Js代码中，创建了一个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);
    }
  });
}                  
                

为了使图片剪裁区域产生动画，代码中动态修改<clipPath>元素中的&lr;circle>元素的r属性。

在.cd-radial-slider元素中有2个data属性：data-radius1和data-radius2，它们分别用于接收圆形的初始值和最终值。另外data-centerx1和data-centerx2属性用于使<circle>元素居中。

在Js代码中使用Snap.svg的animate()方法来最终圆形的扩展动画效果。

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

为了在当前选择的幻灯片上应用遮罩效果，Js代码中动态修改了<image>元素的样式，例如，为了使下一个幻灯片可见，使用下面的代码：

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

this.slides.eq(this.visibleIndex)是可见的幻灯片slide，this.rightMask.attr('id')是<mask>元素的ID。