Shulou(Shulou.com)06/03 Report--

Based on the SVG path movement js content switching plug-in path-slider how to use, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Path-slider.js is a js content switching carousel plug-in based on SVG path movement. The js carousel plug-in can distribute and arrange multiple DOM elements according to the specified SVG path, and then make these DOM elements perform carousel animation on the SVG path.

Usage

Introduce anime.min.js and path-slider.js files into the page.

HTML structure

The HTML structure of one of the simplest js rotation effects based on SVG path motion is as follows.

Chat

Alarm clock

Camera

Envelope

Light bulb

You can see that there is a SVG path path with patterns made of 5 SVG on the path.

Initialize the plug-in

After the page DOM element is loaded, initialize the plug-in as follows.

(function () {/ / set option var options = {startLength: 0, / / define start position duration: 3000, / / animation duration stagger: 15, / / delay time between each animation 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} / / call new PathSlider ('.path-slider__path',' .path-slider__item', options);}) ()

Where PathSlider () has three parameters, which represent:

Path

: SVG path

Items

: DOM element

Options

Configuration parameters

Configuration parameters

The common configuration parameters for the path-slider.js plug-in are:

StartLength: (float or 'center') begins to locate the length of the path of the element.

ActiveSeparation: (float) the distance between the current item and the adjacent item.

PaddingSeparation: (float) the inner spacing at the beginning and end of the path.

Duration, delay, easing, and elasticity: these four parameters are the configuration parameters for the anime.js plug-in.

Stagger: (ms) the delay between animations for each project.

Begin: (function) the callback function after each item starts the animation.

End: (function) the callback function after each item ends the animation.

BeginAll: (function) the callback function after all items are animated.

EndAll: (function) the callback function after all items end the animation.

BlockUntilEnd: (boolean) defaults to false. If set to true, you need to wait until the current animation is over before you can choose another item.

ClickSelection: (boolean) defaults to true, adding click event listeners for each item.

After reading the above, have you mastered how to use the js content switching plug-in path-slider based on SVG path movement? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.