[JS]さまざまなデータを最小限の記述でビジュアル化する高性能なJavaScriptライブラリ -Zeu.js

サイト構築 -JavaScript

Post on:2018年9月13日

sponsors

UX道場 -UXデザインの基礎知識からUI/Webデザインに役立つ情報、Adobe XDの最新情報まで

さまざまなデータを最小限の記述でビジュアル化し、アニメーションで表示する高性能なJavaScriptライブラリを紹介します。
メーターやファンやコントローラーなど、デザインがレトロなのも面白いですね。

Zeu.js -GitHub

上記は静止画ですが、もちろんアニメーションで動きます。
デモのカラーは派手ですが、オプションで簡単に変更できます。

My Command Center

Zeu.jsはCanavasベースで、外部ファイルと空のcanvas要素を用意し、あとはタイプとデータを定義するだけで実装できます。

<!-- 外部ファイル -->
<script src="zeu.min.js"></script>
<!-- 空のcanvas要素 -->
<canvas id="text-meter" width="200" height="100"></canvas>
<script>
  // タイプを定義
  var textMeter = new zeu.TextMeter('text-meter');
  // データを定義
  textMeter.displayValue = 'ZEU';
  textMeter.value = 50;
</script>