titanic

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

Github星跟蹤圖

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

主要指標

概覽
名稱與所有者icons8/titanic
主編程語言JavaScript
編程語言JavaScript (語言數: 2)
平台
許可證
所有者活动
創建於2017-03-17 18:46:56
推送於2025-06-01 23:42:31
最后一次提交2025-06-01 20:42:31
發布數0
用户参与
星數2.4k
關注者數64
派生數215
提交數198
已啟用問題?
問題數14
打開的問題數8
拉請求數2
打開的拉請求數1
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?