検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 SVG响应式路径过渡动画幻灯片特效

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

WBOY
WBOYオリジナル
2016-05-17 09:07:161553ブラウズ
　　简要教程
　　这是一款基于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

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：创造更好的浏览体验-HTML5 history API次の記事：跟随鼠标炫酷网站引导页的html5动画特效

    関連記事

    続きを見る