アニメーションするMetroUIを簡単実装する「Metro JS」

「Metro JS」はWindows8で採用され話題となったMetroUIを実装するjQueryプラグインです。アニメーションも簡単に実装できます。

Metro JS

screenshot195

現在はMetroという名前は使われておらず、Modern UIと呼ばれています。話題となっているフラットデザインの代表格ですね。以下のまとめ記事がフラットデザインに詳しいです。

昨今のUIデザインのトレンド、「フラットデザイン」て何?

 

「Metro JS」のサンプルです。見事にフラットなデザインですね。実際はそれぞれのタイルが異なったアニメーションをします。

screenshot196

 

最もシンプルな上下スライドするタイルの実装方法を書いておきます。読み込む外部ファイルは以下の3つです。

<script src="jquery.min.js"></script>
<script src="MetroJs.min.js"></script>
<link rel="stylesheet" href="MetroJs.min.css">

 

HTMLは以下のようにマークアップします。親divのclassで色を指定することができます。

<div id="tile1" class="live-tile red">
  <span class="tile-title">Sample</span>
  <div><a class="full" href="#">フロント画面</a></div>
  <div><p>文章</p></div>
</div>

 

JSは以下の1行のみです。

$(".live-tile").liveTile();

 

これで完成です。フロント画面と文章画面が上下スライドで切り替わり続けます。

screenshot198

 

実装方法は”Fiddle Around! (More Examples)”という箇所でたくさん紹介されていますので、英語ドキュメントを読まずとも楽々実装できるかと思います。

 

Metro UIに代表されるフラットデザインは使いづらいという意見も多くあります。

Modern UI のようなフラットデザインを目指して使いづらくなっている件について

 

個人的にはミニマル指向なのでフラットデザインは好きなのですが、上記記事で指摘されている”使いづらい理由”には同意します。安易に取り入れるだけではなく、利用者が使いやすいUIを提供していきたいですね。

 

Home > JavaScript > アニメーションするMetroUIを簡単実装する「Metro JS」

Return to page top