ITエンジニア/デザイナ向けにオープンソースを毎日紹介

スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。

しかしWeb(HTML5)の進化は止まりません。ついにここまで!というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。

Famo.usの使い方

たくさんのデモが登録されていますので見ていきましょう。

写真と画像の組み合わせ。左右から表示されるアニメーションもあります。
写真と画像の組み合わせ。左右から表示されるアニメーションもあります。

スクロールパララックスエフェクトのデモ。
スクロールパララックスエフェクトのデモ。

アニメーションのデモ。
アニメーションのデモ。

カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。
カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。

スライドして表示される写真のデモです。
スライドして表示される写真のデモです。

ページ送りのデモ。
ページ送りのデモ。

天気アプリデモ。ベクター調の表示がいいですね。
天気アプリデモ。ベクター調の表示がいいですね。

タスク管理。スムーズなアニメーションがいい感じです。
タスク管理。スムーズなアニメーションがいい感じです。

メニューがアニメーション表示されるデモです。
メニューがアニメーション表示されるデモです。

こちらもメニュー表示のデモ。
こちらもメニュー表示のデモ。

上からスライドしてメニューが表示されます。
上からスライドしてメニューが表示されます。

かなりダイナミックなコンテンツ表示のデモです。Webでここまでいけるのかといった感があります。
かなりダイナミックなコンテンツ表示のデモです。Webでここまでいけるのかといった感があります。

コンテンツが右側に縮小されつつメニューが出ます。Airbnb風です。
コンテンツが右側に縮小されつつメニューが出ます。Airbnb風です。

Yelp風。pull to refreshを再現しています。
Yelp風。pull to refreshを再現しています。

Famo.usでは3Dレイアウトをサポートしており、DOM/Canvas/WebGLを使ってレンダリングしています。アニメーションはかなりスムーズです。今後のWebを考える上でCanvasやWebGLの知識は欠かせません。とは言え、素で使うのは難しいと思うのでFamo.usを使って扱いやすくするのは良さそうです。

Famo.usはHTML5/JavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。

Famo.us

Famous/famous

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2