https://github.com/jonchretien/tickit
A basic ticker that uses CSS animations & vanilla JavaScript.
https://github.com/jonchretien/tickit
css css-animations javascript ticker vanilla-javascript
Last synced: 5 months ago
JSON representation
A basic ticker that uses CSS animations & vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/jonchretien/tickit
- Owner: jonchretien
- License: mit
- Created: 2016-02-29T04:09:42.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-09-06T13:25:59.000Z (10 months ago)
- Last Synced: 2025-09-06T15:22:26.631Z (10 months ago)
- Topics: css, css-animations, javascript, ticker, vanilla-javascript
- Language: JavaScript
- Size: 12.7 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# tickit
_A basic ticker that uses CSS animations & vanilla JavaScript. It supports vertical scrolling and runs either on an infinite timed loop or when the user clicks the container._
## Install
### Download
#### CSS
+ [tickit.css](https://github.com/jonchretien/tickit/blob/master/dist/css/tickit.css)
#### JavaScript
+ [tickit.js](https://github.com/jonchretien/tickit/blob/master/dist/js/tickit.js)
### Markup
**tickit** works with a base element and an inner container. Child elements are dynamically added.
``` html
```
### JavaScript
``` js
/**
* @param {Object} config - Tickit configuration values.
* @param {array} config.data - The text to display.
* @param {string} config.selector - The id for the container element.
* @param {number} config.duration - The animation duration.
* @param {number} config.initialPos - The initial offset position.
* @param {string} config.behavior - The user interaction behavior.
*/
const config = {
data: ['item 1', 'item 2', 'item 3'],
selector: '#tickit',
duration: 1000,
initialPos: -15,
behavior: 'scroll'
};
const tickit = Tickit(config).init();
```
## Browser Support
Still need to test in IE, iOS, and Android, but otherwise most modern browsers
## License
**tickit** is released under the [MIT license](https://github.com/jonchretien/tickit/blob/master/LICENSE.txt).
## To Do
+ Demos
+ Tests
+ Account for longest txt in arr (for box width)
+ Test in IE, iOS, and Android browsers
+ Minify files