[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js

Post on:2015年5月13日

よく見かけるWebページのインタラクションも、ちょっとした工夫を加えることで新鮮な驚きと感動を与えることができます。

Mediumで採用されているような気持ちいい操作で画像を拡大するシンプルなスクリプトを紹介します。
レスポンシブ対応で、実装も非常に簡単です。

サイトのキャプチャ

Zoom.js -GitHub

Zoom.jsのデモ

デモはMediumのようなレイアウトで、画像がいつか配置されています。

デモのキャプチャ

デモページ

画像をクリック・タップすると、表示されるのが画像だけになり、拡大表示されます。

デモのキャプチャ

画像を拡大したところ

ここまでの流れだけでもシンプルで無駄がなく気持ちいい動きですが、元画像に戻す（コンテンツに戻る）時は3つの方法が用意されています。

  • 拡大画像をクリック・タップ
  • 「Esc」キー
  • スクロール

スクロールで元画像に戻るのは、慣れると非常に便利なインタラクションです。

いつものように動きをアニメーションGIFにしてみました。

デモのアニメーション

デモのアニメーションGIF

ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。

Zoom.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。
アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。

<head>
  ...
   <link rel="stylesheet" type="text/css" href="css/zoom.css">
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="js/transition.js"></script>
  <script src="js/zoom.js"></script>
</body>

Step 2: HTML

あとは、画像を配置したimg要素にdata属性を加えるだけです。

<img src="img/image.png" data-action="zoom">

sponsors

top of page

©2024 coliss