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

画像やSVGは使用せず、CSSで作成されたサークル・アロー・チェック・リストなど、Webページで使うさまざまなアイコンをJavaScriptで変形させるMarkaを紹介します。

変形は下記のように異なる形状へ変えたり、サイズやカラーだけを変更することもできます。もちろん、CSSで実装されたアイコンをそのまま利用するだけでもOKです。

デモのアニメーション

Marka
Marka -GitHub

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);

アイコンのカスタマイズ

Markaでは18種類のアイコンが使用できますが、必要なアイコンのみのセットを作成することもできます。下記ページで、必要なアイコンをチェックし、スタイルシートファイルをダウンロードできます。

サイトのキャプチャ

Customize -Marka

sponsors

top of page

©2018 coliss