[JS]画像の拡大表示をシンプルなコードで実装し、スマホ時のクロップ表示にも対応しているスクリプト -enhance.js
Post on:2016年2月29日
sponsors
Mediumで採用されているような画像拡大のエフェクトに、より使いやすくなるように工夫が加えられたスクリプトを紹介します。
アニメーションがより洗練され、スマホなどの小さいサイズではクロップして画像を表示します。
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、当スクリプトを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script> <script src="js/enhance.js"></script> </body> |
Step 2: HTML
あとは、img要素に「data-action="zoom"」を加えるだけです。
|
1 |
<img src="img/palm.jpg" data-action="zoom"> |
クロップ対応にするには、「.cropped」を加えます。
|
1 |
<img src="img/trees.jpg" data-action="zoom" class="cropped"> |
sponsors
