基于SVG路径运动的js轮播插件pathslider

所属分类：-

13219 236 查看评论 (2)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：path-slider.js是一款基于SVG路径运动的js轮播插件。该js轮播插件可以根据指定的SVG路径，分布排列多个DOM元素，然后使这些DOM元素在SVG路径上执行轮播动画。

path-slider.js

path-slider.js是一款基于SVG路径运动的js轮播插件。该js轮播插件可以根据指定的SVG路径，分布排列多个DOM元素，然后使这些DOM元素在SVG路径上执行轮播动画。

使用方法

在页面中引入anime.min.js和path-slider.js文件。

<script src="js/anime.min.js"></script>
<script src="js/path-slider.js"></script>

HTML结构

一个最简单的基于SVG路径运动的js轮播效果的HTML结构如下。

<div class="container">
    <!-- Path Slider Container -->
    <div class="path-slider">
        <!-- SVG path to slide the items -->
        <svg width="460px" height="310px" viewBox="0 0 460 310">
            <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path>
        </svg>
        <!-- Slider items -->
        <a href="#chat" class="path-slider__item">
            <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div>
            <div class="item__title"><h2>Chat</h2></div>
        </a>
        <a href="#alarmclock" class="path-slider__item">
            <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div>
            <div class="item__title"><h2>Alarm clock</h2></div>
        </a>
        <a href="#camera" class="path-slider__item">
            <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div>
            <div class="item__title"><h2>Camera</h2></div>
        </a>
        <a href="#envelope" class="path-slider__item">
            <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div>
            <div class="item__title"><h2>Envelope</h2></div>
        </a>
        <a href="#lightbulb" class="path-slider__item">
            <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div>
            <div class="item__title"><h2>Light bulb</h2></div>
        </a>
    </div>
</div>

可以看到有一条SVG path路径，在路径上有以及5个SVG做成的图案。效果图如下：

path-slider效果图

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。

(function () {
 
    // Setting up the options
    var options = {
        startLength: 0, // start positioning the slider items at the beginning of the SVG path
        duration: 3000, // animation duration (used by anime.js)
        stagger: 15, // incrementally delays among items, producing an staggering effect
        easing: 'easeOutElastic', // easing function (used by anime.js)
        elasticity: 600, // elasticity factor (used by anime.js)
        rotate: true // This indicates that items should be rotated properly to match the SVG path curve
    };
 
    // Initialize the slider using our SVG path, items, and options
    new PathSlider('.path-slider__path', '.path-slider__item', options);
 
})();

其中，PathSlider()有三个参数，分别表示：