search

Home  >  Article  >  Web Front-end  >  HTML5 SVG响应式路径过渡动画幻灯片特效

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

WBOY
WBOYOriginal
2016-05-17 09:07:161522browse
　　简要教程
　　这是一款基于HTML5 SVG制作的路径过渡动画幻灯片特效。该幻灯片特效使用SVG路径来剪裁幻灯片中的图片，制作出幻灯片切换时不规则的图形变换效果。

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

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

  2.   

    •    

    •       

    •         
    •                     Aimated SVG
    •          
    •             
    •               
    •             

    •          

    •            
    •          
    •         

    •       

  •    

  •   
  •    

  •       

  •         
  •          
  •         

  •       

  •    

  •   
  •    
  •      
  •   

  •   
  •   
  •   
  •   

    1.    
    2. Item 1

    3.    
    4. Item 2

    5.    
    6.   

    •      
    复制代码

    　　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
    　　为了制作幻灯片图片剪裁区域动画，特效中动画中的元素的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

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：创造更好的浏览体验-HTML5 history APINext article：跟随鼠标炫酷网站引导页的html5动画特效

    Related articles

    See more