简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-17 09:07:16
Original
1494 Leute haben es durchsucht
　　简要教程
　　这是一款基于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

    Verwandte Etiketten：
    html
    Quelle：php.cn
    Vorheriger Artikel：创造更好的浏览体验-HTML5 history API Nächster Artikel：跟随鼠标炫酷网站引导页的html5动画特效
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Regulärer Ausdrucksfilter für MERN-Stack-Suchfelder und Kontrollkästchen Ich versuche durch Learning by Doing zu verstehen, wie der MERN-Stack zusammenarbeitet, un...
    Aus 2024-04-06 14:53:12
    0
    1
    425
    Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
    Aus 2024-04-05 12:57:00
    0
    1
    456
    Problem bei der Prestashop-Installation: Das benutzerdefinierte Modul kann nicht installiert werden Ich bin neu in der Prestashop-Modulentwicklung. Ich versuche, Amys erstes Prestashop-Modul...
    Aus 2024-04-03 19:24:44
    0
    1
    402
    PHP-Tutorial: Wie lade ich Texte und Bilder mit PHP auf Linkedin hoch? Ich versuche, Texte, Bilder und Links mit LinkedinsRestAPI (https://learn.microsoft.com/en...
    Aus 2024-04-03 18:42:29
    0
    1
    420
    Ich kann keine Informationen aus meiner MySQL-Datenbank empfangen, obwohl ich Tutorials gesehen habe, die genau das Gleiche tun Ich versuche also, ein Programm zu erstellen, das eine MySQL-Datenbank liest und schreibt,...
    Aus 2024-04-03 14:46:04
    0
    1
    298
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！