当前位置：首页 > 网页特效 > 幻灯片和轮播图

基于SVG clip-path的弹性过渡幻灯片特效

分类：幻灯片和轮播图日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入elastic-slider.css和snap.svg、elastic-slider.js文件。

```html
<link rel="stylesheet" href="path/to/elastic-slider.css">
<script src="snap.svg.js"></script>
<script src="elastic-slider.js"></script>   
```       
#####  HTML结构
该弹性幻灯片采用嵌套div的HTML结构。

```html
<div class="elastic-slider">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
</div>
```
#####  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将变为一条直线，数值越大，曲线越弯曲。|

web299.com

基于SVG clip-path的弹性过渡幻灯片特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果