- Notifications
You must be signed in to change notification settings - Fork213
A set of animated icons + code to insert them into the webpages
icons8/titanic
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A collection of animated icons + javascript library.
You can install it either via CDN or npm.
Insert this string to your HTML head:
<scriptsrc="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
And initialize it before the body closes:
<script>vartitanic=newTitanic();</script>
This way, you can add icons anywhere in your HTML using this tag:
<divclass='titanic titanic-chat'></div>
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
If you'd like to host your images on your server instead of rawgit, pass the base URL with the init() function:
titanic.begin('/my/base/directory/');
Then, if you have a div with, Titanic will search for icons in /my/base/directory/chat.json.
npm install titanic-icons --savetitanic.isInitialized()-- just true/false flagtitanic.items-- list of titanic itemstitanic.items[index].on(), titanic.items[index].off(), titanic.items[index].play()-- play animations of the titanic item by indextitanic.on(token), titanic.off(token), titanic.play(token)-- play animations of the titanic item by token (name)
<head><!--Inserting the scripts once for the whole page--><scriptsrc="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script></head><body><!--Inserting an icon--><divclass='titanic titanic-checkbox'></div><!--Initializing--><script>vartitanic=newTitanic({hover:true,// auto animated on hover (default true)click:true// auto animated on click/tap (default false)});</script><!--Clicking turns this icon on--><buttononclick="titanic.on(getElementById('checkbox').value)">On</button></body>
JavaScript is basicallybodymovin plus few lines of my code. It's a solid library with an awesome name. Thank you, guys.
Icons are created byMargarita Ivanchikova fromIcons8. She has many more awesome animations in her portfolio.
The code rewritten byDenis Alexanov, my teacher and guru. Thank you!
Project is produced by Icons8, author of the famous icon library,IconPharm, andSleek Logos.
The code is created by Icons8
