ホームページを作る人のネタ帳

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

画像のズーム

と、いうわけで今回は画像のズームがとても美しいと称される「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!
yamada
Posted byyamada

Comments 0

There are no comments yet.

Leave a reply