当前位置：首页 > 网页特效 > 幻灯片和轮播图

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

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

简介

##### 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元素。

```html
<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"></circle>
            </clipPath>
          </defs>
  
          <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
        </svg>
      </div> 
  
      <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> 
    </li>
  
    <li class="next-slide">
      
    </li>
  
    
     
  </ul> 
  
  <ul class="cd-slider-navigation">
    <li><a href="#0" class="next">Next</a></li>
    <li><a href="#0" class="prev">Prev</a></li>
  </ul> 
   
  <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"></path>
          </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"></path>
          </mask>
      </defs>
    </svg>
  </div>
</div>         
```     
#####  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用于导航被点击的时候创建点击效果。

```html
.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方法来为幻灯片的导航点击绑定事件。

```html
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()方法来最终圆形的扩展动画效果。

```html
clipPathVisible.animate(
  {'r': radius2}, duration, customMinaAnimation, function(){
  //callback function here
});    
```              
为了在当前选择的幻灯片上应用遮罩效果，Js代码中动态修改了image元素的样式，例如，为了使下一个幻灯片可见，使用下面的代码：

```html
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。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果