[JS]レスポンシブ対応の画像表示テクニック!見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint

画像をデスクトップの広いスペースではそのまま表示し、スマホやタブレットなどの狭いスペースでは指定した箇所を中心にクロップして表示する、レスポンシブ対応の画像をクロップするjQueryのプラグインを紹介します。

サイトのキャプチャ

FocusPoint -GitHub
左:オリジナルの画像
右上:画像の中央をクロップ、右下:FocusPointで指定した箇所を中心にクロップ

FocusPointのデモ

デモでは、画像をさまざまなサイズにクロップし、指定した箇所を中心に表示しています。
高さが狭い横長だけでなく、幅が狭い縦長でもOKです!

デモのキャプチャ

デモ:Dolphin
イルカを中心に。

デモのキャプチャ

デモ:Kangaroo
カンガルーを中心に

画像の中心となる箇所は、座標で指定します。

サイトのキャプチャ

画像をクロップする際の座標

デモのキャプチャ

デモ:Pure CSS Comparison
全体が表示された状態

デモのキャプチャ

左:高さを狭くすると、鳥を中心にクロップされます

FocusPointの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="focuspoint.css">
  <script src="jquery.js"></script>
  <script src="focuspoint.js"></script>
</head>

Step 2: HTML

img要素で配置した画像をラッパーで包み、中心となる座標を指定します。

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

Step 3: JavaScript

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$('.focuspoint').focusPoint();

top of page

©2017 coliss