简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

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

WBOY
Libérer： 2016-05-17 09:07:16
original
1494 Les gens l'ont consulté
　　简要教程
　　这是一款基于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

    Étiquettes associées：
    html
    source：php.cn
    Article précédent：创造更好的浏览体验-HTML5 history API Article suivant：跟随鼠标炫酷网站引导页的html5动画特效
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
    Depuis 2024-04-06 14:53:12
    0
    1
    425
    Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
    Depuis 2024-04-05 12:57:00
    0
    1
    456
    Problème d'installation de Prestashop : Impossible d'installer le module personnalisé Je suis nouveau dans le développement de modules Prestashop. J'essaie de créer le premier ...
    Depuis 2024-04-03 19:24:44
    0
    1
    402
    Tutoriel PHP : Comment télécharger du texte et des images sur Linkedin en utilisant PHP ? J'essaie de télécharger du texte, des images et des liens à l'aide de LinkedinsRestAPI (ht...
    Depuis 2024-04-03 18:42:29
    0
    1
    420
    Impossible de recevoir des informations de ma base de données MySQL malgré avoir vu des tutoriels faisant exactement la même chose J'essaie donc de créer un programme qui lit et écrit dans une base de données MySQL, ce qu...
    Depuis 2024-04-03 14:46:04
    0
    1
    298
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！