• Stars
    star
    2,433
  • Rank 18,907 (Top 0.4 %)
  • Language
    JavaScript
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A set of animated icons + code to insert them into the webpages

Titanic

A collection of animated icons + javascript library.

Preview

Preview all icons

Installation

You can install it either via CDN or npm.

CDN

Insert this string to your HTML head:

<script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>

And initialize it before the body closes:

<script>
    var titanic = new Titanic();
</script>

This way, you can add icons anywhere in your HTML using this tag:

<div class='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

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:

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

<head>
    <!--Inserting the scripts once for the whole page-->
    <script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>
</head>
<body>
    <!--Inserting an icon-->
    <div class='titanic titanic-checkbox'></div>

    <!--Initializing-->
    <script>
        var titanic = new Titanic({
          hover: true, // auto animated on hover (default true)
          click: true  // auto animated on click/tap (default false)
        });
    </script>

    <!--Clicking turns this icon on-->
    <button onclick="titanic.on(getElementById('checkbox').value)">On</button>
</body>

Credits

JavaScript is basically 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 from Icons8. She has many more awesome animations in her portfolio.

The code rewritten by Denis Alexanov, my teacher and guru. Thank you!

Project is produced by Icons8, author of the famous icon library, IconPharm, and Sleek Logos.

The code is created by Icons8

Magritte

More Repositories

1

flat-color-icons

Free Flat Color Icons
HTML
2,114
star
2

line-awesome

Replace Font Awesome with modern line icons
1,179
star
3

WPF-UI-Framework

A set of UI controls that can be used for designing better user interfaces for Windows.
482
star
4

welovesvg

SVG sets compilation for popular iconic projects
336
star
5

lunacy-docs

Documentation for Lunacy, Graphic Design Software with built-in assets
310
star
6

windows-10-icons

Free Windows 10 Icons
HTML
192
star
7

webicon

Icon library
JavaScript
191
star
8

svg-caster

SVG font to SVG converter
JavaScript
91
star
9

svg-path-bounding-box

SVG path bounding box calculator
JavaScript
60
star
10

impresser

Crawler that crawls and renders your single page website for Googlebot
JavaScript
40
star
11

svg-simplify

SVG simplify tool
JavaScript
31
star
12

free

.free format is an open efficient format for UI Design vector graphics
C#
26
star
13

svg2android

Nodejs-based tool for convert SVG vector graphics files to Android Vector Drawable format
JavaScript
22
star
14

api-docs

Documentation for Icons8 API
API Blueprint
18
star
15

svg-bounding-box

SVG bounding box calculator
JavaScript
16
star
16

bower-webicon

Icon library https://icons8.github.io/webicon/
JavaScript
13
star
17

icons8-shortcuts

Proposed shortcuts for Icons8 desktop app
JavaScript
9
star
18

Icons8_WPF_Search_iOS

Search icon in the iOS style
C#
7
star
19

icon-solution

JavaScript
6
star
20

impresser-html-angular-minifier

JavaScript
6
star
21

impresser-html-minifier

JavaScript
6
star
22

impresser-warm

JavaScript
5
star
23

impresser-blocked-resources

JavaScript
5
star
24

impresser-server

JavaScript
4
star
25

omg-img

CSS
4
star
26

impresser-sitemap

JavaScript
4
star
27

impresser-mysql-storage

JavaScript
3
star
28

icons-docs

2
star
29

Icons8_WPF_Search_Windows10

Search icon in the Windows 10 style
1
star
30

Icons8_WPF_Search_Material

Search icon in the Material style
1
star