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

这是一款基于HTML5 SVG制作的路径过渡动画幻灯片特效。该幻灯片特效使用SVG路径来剪裁幻灯片中的图片,制作出幻灯片切换时不规则的图形变换效果。,HTML5中国,中国最大的HTML5中文门
  简要教程
  这是一款基于HTML5 SVG制作的路径过渡动画幻灯片特效。该幻灯片特效使用SVG路径来剪裁幻灯片中的图片,制作出幻灯片切换时不规则的图形变换效果。

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

  在ul.cd-slider元素中列表项由一个SVG<clipPath> 元素(用于改变图片的裁剪区域)和一个<image>元素组成。
  1. <div class="cd-slider-wrapper">
  2.   <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">
  3.     <li class="visible">
  4.       <div class="cd-svg-wrapper">
  5.         <svg viewBox="0 0 1400 800">
  6.                     <title>Aimated SVG</title>
  7.           <defs>
  8.             <clipPath id="cd-image-1">
  9.               <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
  10.             </clipPath>
  11.           </defs>
  12.            
  13.           <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
  14.         </svg>
  15.       </div> <!-- .cd-svg-wrapper -->
  16.     </li>
  17.   
  18.     <li>
  19.       <div class="cd-svg-wrapper">
  20.         <svg viewBox="0 0 1400 800">
  21.           <!-- svg content here -->
  22.         </svg>
  23.       </div> <!-- .cd-svg-wrapper -->
  24.     </li>
  25.   
  26.     <!-- other list items here -->
  27.      
  28.   </ul> <!-- .cd-slider -->
  29.   
  30.   <ul class="cd-slider-navigation">
  31.     <li><a href="#0" class="next-slide">Next</a></li>
  32.     <li><a href="#0" class="prev-slide">Prev</a></li>
  33.   </ul> <!-- .cd-slider-navigation -->
  34.   
  35.   <ol class="cd-slider-controls">
  36.     <li class="selected"><a href="#0"><em>Item 1</em></a></li>
  37.     <li><a href="#0"><em>Item 2</em></a></li>
  38.     <!-- other list items here -->
  39.   </ol> <!-- .cd-slider-controls -->
  40. </div> <!-- .cd-slider-wrapper -->     
复制代码

  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%。
  1. .cd-slider > li.visible {
  2.   position: relative;
  3.   z-index: 2;
  4.   opacity: 1;
  5. }
  6. .cd-slider > li.is-animating {
  7.   z-index: 3;
  8.   opacity: 1;
  9. }
  10. .cd-slider .cd-svg-wrapper {
  11.   /* using padding Hack to fix bug on IE - svg height not properly calculated */
  12.   height: 0;
  13.   padding-bottom: 57.15%;
  14. }
  15. .cd-slider svg {
  16.   position: absolute;
  17.   top: 0;
  18.   left: 0;
  19.   width: 100%;
  20.   height: 100%;
  21. }               
复制代码

  JAVASCRIPT
  为了制作幻灯片图片剪裁区域动画,特效中动画<clipPath>中的<path>元素的d属性。

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

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

  特效中使用Snap.svg的animate()方法来制作SVG路径动画
  1. clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
  2.   clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
  3.     oldSlide.removeClass('visible');
  4.     newSlide.addClass('visible').removeClass('is-animating');
  5.   });
  6. });        
复制代码

  另外,这个幻灯片特效可以使用移动触摸或键盘来控制幻灯片的切换。

  如果你喜欢这个插件,那么你可能也喜欢:

  带38种动画过渡效果的炫酷jQuery幻灯片插件

  基于SVG图形变换的全屏幻灯片特效

   本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/html5/SVG/201508282487.html

【网站声明】本站除付费源码经过测试外,其他素材未做测试,不保证完整性,网站上部分源码仅限学习交流,请勿用于商业用途。如损害你的权益请联系客服QQ:2655101040 给予处理,谢谢支持。
svg

相关文档推荐

由于实际运行环境是在浏览器中,因此性能还取决于JavaScript解释器的效率,指定的FPS帧速在低性能解释器中可能不会达到,所以这部分不是开发者能够决定的,开发者能作的是尽可能通
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。,HTML5中国,中国最大的HTML5中文门户。
随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提
你想要在自己网站上分享一个产品,或者是一个作品集,又或者仅仅只是一个灵感。在你发布到网上之前,你想让它看起来有吸引力,专业,或者至少得看起来像那么回事。那么你接下
H5广告,包括H5广告的设计流程,究竟有什么讲究,和阶段。为了能帮助更多的人了解H5广告,我专门做了一个讲义。同时,也让我意外的收到了非常好反馈和认!这是对我的极大鼓励!我的
本文主要内容有:框架与组件、构建生态、开发技巧与调试、html、css与重构、native/hybrid/桌面开发、前端/H5优化、全栈/全端开发、研究实验、数据分析与监控、其它软技能、前端技术网