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

当前位置:主页 > Html5库 > SVG > 基于SVG clip-path的弹性过渡幻灯片特效
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
基于SVG clip-path的弹性过渡幻灯片特效
分享:

    插件介绍

    elastic-slider是一款基于SVG clip-path的弹性过渡幻灯片特效。该幻灯片使用Snap.svg来驱动路径动画,在拖动图片时以波浪形的弹性效果切换幻灯片。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-02
    阅读:
简要教程

elastic-slider是一款基于SVG clip-path的弹性过渡幻灯片特效。该幻灯片使用Snap.svg来驱动路径动画,在拖动图片时以波浪形的弹性效果切换幻灯片。

安装

可以通过npm来安装elastic-slider幻灯片插件。

npm install elastic-slider                  
                

使用方法

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

<link rel="stylesheet" href="path/to/elastic-slider.css">
<script src="snap.svg.js"></script>
<script src="elastic-slider.js"></script>          
                
HTML结构

该弹性幻灯片采用嵌套<div>的HTML结构。

<div class="elastic-slider">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
</div>
                
CSS样式

SVG路径是通过JS代码动态生成的。需要以内联的方式添加下面的CSS代码,指定左右SVG剪裁路径。

.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中的heightwidth属性来修改幻灯片的尺寸。

.elastic-slider{
    width: 400px;
    height: 300px;
}                  
                
初始化插件

可以通过new ElasticSlider()方法来实例化一个elastic-slider幻灯片对象。

new ElasticSlider('.elastic-slider');                  
                

配置参数

ElasticSlider构造函数接收两个参数:

  • el:DOM元素的选择器。
  • options:可选,幻灯片的参数对象。

可用的配置参数如下:

参数 类型 默认值 描述
maxStretch integer 100 弹性拉伸效果的最大距离,单位像素。
bezierLen integer 80 弹性拉伸效果的自定义曲线参数。设置为0将变为一条直线,数值越大,曲线越弯曲。

elastic-slider弹性SVG路径幻灯片的github地址为:https://github.com/lmgonzalves/elastic-slider

网友评论