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

HTML5 SVG响应式路径过渡动画幻灯片特效

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

简介

##### HTML结构
该幻灯片特效的HTML结构由包含幻灯片的无序列表ul.cd-slider和两个作为导航的有序列表元素ul.cd-slider-navigation和ol.cd-slider-controls组成。

在ul.cd-slider元素中列表项由一个SVG clipPath元素（用于改变图片的裁剪区域）和一个image元素组成。

```html
<div class="cd-slider-wrapper">
  <ul class="cd-slider" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
    <li class="visible">
      <div class="cd-svg-wrapper">
        <svg viewBox="0 0 1400 800">
                    <title>Aimated SVG</title>
          <defs>
            <clipPath id="cd-image-1">
              <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"></path>
            </clipPath>
          </defs>
           
          <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
        </svg>
      </div> 
    </li>
  
    <li>
      <div class="cd-svg-wrapper">
        <svg viewBox="0 0 1400 800">
          
        </svg>
      </div> 
    </li>
  
    
     
  </ul> 
  
  <ul class="cd-slider-navigation">
    <li><a href="#0" class="next-slide">Next</a></li>
    <li><a href="#0" class="prev-slide">Prev</a></li>
  </ul> 
  
  <ol class="cd-slider-controls">
    <li class="selected"><a href="#0"><em>Item 1</em></a></li>
    <li><a href="#0"><em>Item 2</em></a></li>
    
  </ol> 
</div>     
```           
#####  CSS样式
所有的幻灯片slide都设置透明度为0，使用绝对定位，使它们逐个堆叠在一起（使用top: 0 和 left:0）。当前被选择的幻灯片会被添加.visible class使其变为可见。在剪裁动画被执行的时候，列表项会被添加.is-animating class。

注意，特效中使用了Padding Hack来使SVG具有响应式效果（在IE中如果你不明确指定SVG的高度，它会被设置为150px）。在特效中设置div.cd-svg-wrapper的高度为0，padding-bottom为57.15%（为了保持SVG的比例，这里是800/1400），并设置SVG 的宽度和高度为100%。

```html
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}
.cd-slider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}          
```      
##### JAVASCRIPT 
为了制作幻灯片图片剪裁区域动画，特效中动画clipPath中的path元素的d属性。

这里执行动画的步骤和基于SVG图形变换的全屏幻灯片特效中是相同的，不同的是这里只需要执行6个步骤：3个步骤从当前幻灯片变换到下一个幻灯片，以及3个步骤从前一个幻灯片变换会当前幻灯片。

当路径定义完成后，特效中在.cd-slider元素上添加data-stepn属性，它等于d属性中定义的路径。

特效中使用Snap.svg的animate()方法来制作SVG路径动画

```html
clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
  clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
    oldSlide.removeClass('visible');
    newSlide.addClass('visible').removeClass('is-animating');
  });
});       
```         
另外，这个幻灯片特效可以使用移动触摸或键盘来控制幻灯片的切换。

web299.com

HTML5 SVG响应式路径过渡动画幻灯片特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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