Установка:
Добавляем на сайт библиотеку jQuery и скрипт ckLine.js
- Скачать: ckLine.js
- Скачать: ckLine.min.js
Создаем SVG элемент:
|
1 |
<svg id="ckLine" xmlns="http://www.w3.org/2000/svg"></svg> |
И подключаем к нему функцию:
|
1 |
$('#ckLine').ckLine(); |
Или с настройками как в примере ниже:
|
1 2 3 4 5 6 7 8 |
$('#ckLine').ckLine({ leftRight: false, strokeColor: '#FFF', interval: 800, animateTime: 1600, lifeTime: 3000, strokeWidth: 3 }); |
Пример:
Настройки:
| Название | Тип | По умолчанию | Описание |
|---|---|---|---|
| svgId | string | null | svg ID |
| width | number | SvgWidth | Ширина svg |
| height | number | SvgHeight | Высота svg |
| strokeColor | string | #000 | Цвет линии |
| strokeWidth | number | 2 | Толщина линии |
| animateTime | number | 1000 | Скорость анимации |
| interval | number | 600 | Интервал |
| fadeOut | number | 800 | Время до исчезновения |
| lifeTime | number | 2000 | Продолжительность анимации |
| easing | string | swing | Функция плавности |
| leftRight | boolean | true | Только горизонтальные линии |
| animationTimeRange | array | [<number>, <number>] | Массив временных диапазонов |
ckLine.js на github.com
Добавить комментарий: