コレは使ってみたいな！CSSで作成されたアイコンをモーフィングで変形させるスクリプト -Marka

サイト構築 -JavaScript

Post on:2014年8月22日

Markaのデモ

上記gifアニメーションの実際の動きは、下記ページで楽しめます。
Chrome, Safari, Firefox, Opera, IEは10+でご覧ください。

Marka
左右の矢印で、変形します。

利用できるアイコンは現在、18種類。
丸・三角・四角のシェイプ、+-x*の記号、フォームのチェックやリスト、ナビゲーションのアローなどが揃っています。

Icons -Marka

Markaの使い方

と、使い方の前に、、、各アイコンは画像やSVGではなく、下記のようにCSSで作成されています。

各アイコンのスタイルシートファイル

では、Markaの使い方を。

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="/path/to/marka.min.css">
  <script src="/path/to/marka.min.js"></script>
</head>

Step 2: アイコンの設置

スクリプトを初期化し、アイコンを配置します。

<i id="icon"></i>

<script>
    var m = new Marka('#icon');
</script>

同じアイコンを複数設置する場合は、下記のようになります。

<i class="icon"></i>
<i class="icon"></i>
<i class="icon"></i>

<script>
    var m = new Marka('.icon');
</script>

異なるアイコンを設置する場合は、スクリプトをそれに合わせて設定します。

<i id="toggleAccordion"></i>
<i id="toggleModal"></i>

<script>
    var accordionIcon = new Marka('#toggleAccordion');
    var modalIcon = new Marka('#toggleModal');
</script>

Step 3: アイコンの変形

18種類のアイコンはそれぞれすべてに変形が可能で、スクリプトで変形する形状を指定します。

var m = new Marka('#icon');
m.set('circle');

// 3秒後に四角に変形
setTimeout(function() {
    m.set('square');
}, 3000);

アイコンのカラーやサイズを変更させることもできます。

var m = new Marka('#icon');
m.set('times').color('#ffffff');

// 3秒後にカラーを変更
setTimeout(function() {
    m.color('#ff00000');
}, 3000);

// 3秒後にサイズを変更
setTimeout(function() {
    m.size(30);
}, 3000);