CSS3だけで作るミニチュア風写真「tiltShift.js」 // MOONGIFT Archived

tiltShift.jsはミニチュア風写真をCSS3で実現するソフトウェアです。

少し前に風景をまるでミニチュアの写真のように加工するテクニックが流行りました。やり方も既に手順化されており、色々なカメラアプリでも楽しめます。そんな加工をCSS3で行ってしまうライブラリがtiltShift.jsです。

イフェクト後の写真です。

左上を解除しました。こちらが元の写真です。

右上を解除しました。

左下を解除しました。

右下を解除しました。

tiltShift.jsは元の画像には一切の編集を行わず、中央をそのままに外側にぼかしをかけることでtilt shiftイフェクトを実現しています（実際にはもっと細かく処理されていますが）。オプションもあり、写真ごとに微調整してみても面白そうです。

tiltShift.jsはjQuery/JavaScript製、GPLのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

JavaScriptで画像加工を行うというのは理に叶っているように見えます。元画像には一切の編集を加えておらず、様々な編集が実現できます。そして何よりサーバサイドの準備がいらず、クライアントサイドだけでできるのがメリットです。ユーザがパラメータを変更すれば自由に編集状態を変更できます。

Canvasを使えばよりダイナミックな変更が出来ると思いますが、CSS3でも十分にイフェクトが行えるのが分かります。こうした画像編集をパッケージ化し、クラスとしてまとめてみるのも面白いかも知れません。Webデザインの新しい価値として注目です。