Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/icons8/titanic
A set of animated icons + code to insert them into the webpages
https://github.com/icons8/titanic
animated-icons icons
Last synced: about 1 month ago
JSON representation
A set of animated icons + code to insert them into the webpages
- Host: GitHub
- URL: https://github.com/icons8/titanic
- Owner: icons8
- Created: 2017-03-17T18:46:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-04T09:46:09.000Z (about 4 years ago)
- Last Synced: 2024-04-25T15:02:44.486Z (7 months ago)
- Topics: animated-icons, icons
- Language: JavaScript
- Homepage: https://icons8.com/c/animated-icons
- Size: 1.5 MB
- Stars: 2,439
- Watchers: 66
- Forks: 215
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Titanic
A collection of animated icons + javascript library.
**[Preview all icons](https://rawgit.com/icons8/titanic/master/demo/index.html)**
## Installation
You can install it either via CDN or npm.
### CDN
Insert this string to your HTML head:
```html
```
And initialize it before the body closes:
```html
var titanic = new Titanic();
```
This way, you can add icons anywhere in your HTML using this tag:
```html
```
Where chat can be any of these:
* caps
* chat
* checkbox
* expand
* cheap
* expensive
* idea
* mailbox
* mic
* no-mic
* online
* pause
* power
* shopping
* smile
* stop
* unlock
* zoom
### Hosting your images
If you'd like to host your images on your server instead of rawgit, pass the base URL with the init() function:
```javascript
titanic.begin('/my/base/directory/');
```
Then, if you have a div with id="chat", Titanic will search for icons in /my/base/directory/chat.json.
## npm
```
npm install titanic-icons --save
```
## API
* ```titanic.isInitialized()``` -- just true/false flag
* ```titanic.items``` -- list of titanic items
* ```titanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()``` -- play animations of the titanic item by index
* ```titanic.on(token), titanic.off(token), titanic.play(token)``` -- play animations of the titanic item by token (name)
## Example
```html
var titanic = new Titanic({
hover: true, // auto animated on hover (default true)
click: true // auto animated on click/tap (default false)
});
On
```
## Credits
JavaScript is basically [bodymovin](https://github.com/bodymovin/bodymovin) plus few lines of my code. It's a solid library with an awesome name. Thank you, guys.
Icons are created by [Margarita Ivanchikova](https://dribbble.com/imargarita) from [Icons8](https://icons8.com/). She has many more awesome animations in her portfolio.
The code rewritten by [Denis Alexanov](https://github.com/dhilt), my teacher and guru. Thank you!
Project is produced by Icons8, author of the famous icon library, [IconPharm](https://iconpharm.com), and [Sleek Logos](https://sleeklogos.design).
The code is created by Icons8
