这是一款基于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。
网盘下载密码：8svt
