サイト上の画像を美しくズームする「Zoom.js」
2015年09月01日 公開

と、いうわけで今回は画像のズームがとても美しいと称される「Zoom.js」のご紹介。
簡単に導入できるのでECサイトなんかで使ってみるのもいいでしょう。
サンプルデモ
以下で実際のサンプルデモサイトへ。

http://fat.github.io/zoom.js/
ドキュメント&ダウンロード
https://github.com/fat/zoom.js
読み込みにはTwitterのブートストラップも併用します。
<link href="css/zoom.css" rel="stylesheet">
<script src="js/zoom.js"></script>
<script src="js/transition.js"></script>
あとはタグにdata-action="zoom"を追加するだけ。
<img src="img/blog_post_featured.png" data-action="zoom">
と言っても、このタグの追加が一番の問題でして、ブログのように既に多くの蓄積がある場合、過去のもの全て変更するのは難しいです。あくまで新規でサイトを構築する場合に向いていると言えます。
※あとトップ画像のGifアニメに、ズームする画像の右上に微妙にですが、「Hootsweete」というアイコンが出てしまっています。これは私のChromeの拡張機能で出てるものなので、通常はでません。
それでは、また。
ENJOY!