[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
Post on:2015年5月13日
sponsorsr
よく見かけるWebページのインタラクションも、ちょっとした工夫を加えることで新鮮な驚きと感動を与えることができます。
Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプトを紹介します。
レスポンシブ対応で、実装も非常に簡単です。
Zoom.jsのデモ
デモはMediumのようなレイアウトで、画像がいつか配置されています。
画像をクリック・タップすると、表示されるのが画像だけになり、拡大表示されます。
画像を拡大したところ
ここまでの流れだけでもシンプルで無駄がなく気持ちいい動きですが、元画像に戻す（コンテンツに戻る）時は3つの方法が用意されています。
- 拡大画像をクリック・タップ
- 「Esc」キー
- スクロール
スクロールで元画像に戻るのは、慣れると非常に便利なインタラクションです。
いつものように動きをアニメーションGIFにしてみました。
デモのアニメーションGIF
ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。
Zoom.jsの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。
アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。
[html]
...
...
コンテンツ
...
[/html]
Step 2: HTML
あとは、画像を配置したimg要素にdata属性を加えるだけです。
[html]
[/html]
sponsors
