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

Vague.jsはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

iOS 7が登場した直後に一気に注目を集め始めたのが背景をぼかす表現ではないでしょうか。類似のライブラリは幾つかあると思いますが、今回はVague.jsを紹介します。


一例。メインの画像以外はぼかしています。


画像を切り替えることもできます。アルバムに良さそうです。


こちらは中央以外がぼやけています。


こんな感じの表現も可能です。

Vague.jsでは擬似的ではなく、Webページの上に一枚重ねてぼかし表現を加えています。そのため若干重たい気がしますが、画像だけでなくテキストもぼかされるのでより正確な表現ができるようになっています。

iOS 7のレイヤーの重なり具合を表現するUIは新鮮ですが、自然なパララックスはとても難しいです。そこに大きな需要があるのではないかと思います。JavaScript/CSS3を駆使してより滑らかなパパラックスが表現できれば、そのライブラリは必ず人気が出るでしょう。

とは言えパララックスが必要になるためにはWebサイト全体の構成も考えなければなりません。デスクトップよりもモバイルくらいの大きさの画面でこそ映える気がします。ぼかし、パララックスともにiOS 7がデザイナーに面白い問題を投げかけたと言えるでしょう。

Blurred Scrollable Overlay - CodePen

Vague.js

GianlucaGuarini/Vague.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2