web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
幻灯片和轮播图
基于SVG clip-path的弹性过渡幻灯片特效
分类:
幻灯片和轮播图
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入elastic-slider.css和snap.svg、elastic-slider.js文件。 ```html
``` ##### HTML结构 该弹性幻灯片采用嵌套div的HTML结构。 ```html
``` ##### CSS样式 SVG路径是通过JS代码动态生成的。需要以内联的方式添加下面的CSS代码,指定左右SVG剪裁路径。 ```html .clipped-left { -webkit-clip-path: url(#clipped-left); clip-path: url(#clipped-left); } .clipped-right { -webkit-clip-path: url(#clipped-right); clip-path: url(#clipped-right); } ``` 另外图片使用background-image属性来分别指定。 你可以修改.elastic-slider中的height和width属性来修改幻灯片的尺寸。 ```html .elastic-slider{ width: 400px; height: 300px; } ``` ##### 初始化插件 可以通过new ElasticSlider()方法来实例化一个elastic-slider幻灯片对象。 ```html new ElasticSlider('.elastic-slider'); ``` ##### 配置参数 ElasticSlider构造函数接收两个参数: - el:DOM元素的选择器。 - options:可选,幻灯片的参数对象。 可用的配置参数如下: | 参数 | 类型 | 默认值 | 描述 | | ------------ | ------------ | ------------ | ------------ | |maxStretch|integer|100|弹性拉伸效果的最大距离,单位像素。| |bezierLen|integer|80|弹性拉伸效果的自定义曲线参数。设置为0将变为一条直线,数值越大,曲线越弯曲。|
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告