HTML5 SVG响应式路径过渡动画幻灯片特效-H5教程-PHP中文網

首頁

web前端

H5教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:07 AM

html

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

查看演示下载插件

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

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

- Aimated SVG

Item 1

Item 2

复制代码
　　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%。

.cd-slider > li.visible {
position: relative;
z-index: 2;
opacity: 1;
}
.cd-slider > li.is-animating {
z-index: 3;
opacity: 1;
}
.cd-slider .cd-svg-wrapper {
/* using padding Hack to fix bug on IE - svg height not properly calculated */
height: 0;
padding-bottom: 57.15%;
}
.cd-slider svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

复制代码

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

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

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

　　特效中使用Snap.svg的animate()方法来制作SVG路径动画

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
oldSlide.removeClass('visible');
newSlide.addClass('visible').removeClass('is-animating');
});
});

复制代码

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

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

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

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

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles