女性の顔をdivで隠してみたらアートっぽくなった

真木よう子の写真の一部をdivで隠してみました。写真の印象がかなり変わって面白かったのでもっとシンプルなものもつくってみることにしました。

http://naoyashiga.github.io/Yoko_Maki_Viewer/

http://naoyashiga.github.io/Woman/

アート界では顔を切り取ったり、何かに置き換えたりするのはもうすでにやられている印象があります。
サービス終了のお知らせ - NAVER まとめ
北野武が描いたも顔にしかけを施しています
http://llponll.tumblr.com/post/197212042

code

.makiImg{
	max-height:80%;

	-webkit-filter:grayscale(100%) contrast(1.6);
	-moz-filter:grayscale(100%) contrast(1.6);
	filter:grayscale(100%) contrast(1.6);
}

画像をフィルターでグレイスケール、コントラストの加工をします。

.filterWrapper{
	position:absolute;
	top:28%;
	left:0;
	width:100%;
	height:22%;
	background:#fff;

	-webkit-filter:blur(3px);
}

divはblurでぼかしています。画像が一枚だけの時は、画像に応じて位置を調節しました。画像認識から顔の位置がわかればもっと応用が効くと思います。

今後の展望

AngularJSのスワイプ機能を使って、もうちょっとインタラクティブにしたいですねー。