Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/captainkeller/ckline
Generate random Background Lines it's great for Backgrounds
https://github.com/captainkeller/ckline
animation background canvas css html javascript jquery lines plugin svg
Last synced: 2 months ago
JSON representation
Generate random Background Lines it's great for Backgrounds
- Host: GitHub
- URL: https://github.com/captainkeller/ckline
- Owner: captainKeller
- License: gpl-3.0
- Created: 2017-09-18T11:34:27.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2021-07-30T09:54:56.000Z (over 3 years ago)
- Last Synced: 2024-10-24T21:21:31.579Z (3 months ago)
- Topics: animation, background, canvas, css, html, javascript, jquery, lines, plugin, svg
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 20
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ckLine.js
===========
Generates random svg Lines
You can find a demo here
https://www.jqueryscript.net/animation/Animated-SVG-Lines-jQuery-JnLine.html
## Installation
Download package and include `jquery.ckLine.min.js` in your document after including jQuery.
```html
```
## Usage
You need an empty SVG Element in your HTML
```html
```
### Via JavaScript
To call the ckLine plugin, select your target element with jQuery and do the following:
```javascript
$('#ckLine').ckLine();
```
## Options
Name
type
default
svgId
string
null
width
number
SvgWidth
height
number
SvgHeight
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>]
## Functions
To Destroy the plugin
```javascript
$('#ckLine').ckLine.destroy();
```