[JS]画像の拡大表示をシンプルなコードで実装し、スマホ時のクロップ表示にも対応しているスクリプト -enhance.js

Mediumで採用されているような画像拡大のエフェクトに、より使いやすくなるように工夫が加えられたスクリプトを紹介します。

アニメーションがより洗練され、スマホなどの小さいサイズではクロップして画像を表示します。

デモのアニメーション

enhance.js -GitHub

enhance.jsの特徴とデモ

「enhance.js」は「zoom.js」にアニメーションのエフェクトと画像のクロップを加えたもので、img要素にdata属性を加えるだけで簡単に画像拡大のエフェクトが実装できます。
参考: 画像を拡大表示するシンプルなスクリプト -Zoom.js

サイトのキャプチャ

デモページ

まずは、シンプルなデモ。
アニメーションのエフェクトが変わり、気持ちいい動きになっています。

デモのアニメーション

シンプルなデモ

画像を元に戻す(コンテンツに戻る)時は、3つの方法が用意されています。

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

スクロールで元画像に戻るのは、慣れると非常に使いやすいです。

デモのアニメーション

スクロールでも元のサイズに戻ります

もう一つの追加機能「画像のクロップ」は、スマホなどの小さいスクリーンサイズで指定した範囲にクロップされます。

デモのアニメーション

画像のクロップ

クロップは「object-fit」プロパティに対応しているブラウザのみです。
参考: object-fitのサポートブラウザ

enhance.jsの使い方

Step 1: 外部ファイル

head内にzoom.css、bodyの一番下にjQueryとVelocity、当スクリプトを記述します。

Step 2: HTML

あとは、img要素に「data-action="zoom"」を加えるだけです。

クロップ対応にするには、「.cropped」を加えます。

top of page

©2016 coliss