サイト上の画像を美しくズームする「Zoom.js」

サンプルデモ

以下で実際のサンプルデモサイトへ。

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！