[JS]一歩進んだレスポンシブ用の画像配置!見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS

レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。

フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。

サイトのキャプチャ

ResponsifyJS
ResponsifyJS -GitHub

ResponsifyJSのデモ

デモでは、複数の画像がレンガ状に配置されています。

デモのキャプチャ

デモページ: 幅1,200pxで表示

幅が狭くなった場合に、上段の自転車だと左を削り、中段のたんぽぽだと右を削る形で表示されたらいいのにな、と思いませんか?

ResponsifyJSを使用すると、それぞれの写真の主題を中心に表示されます。

デモのキャプチャ

デモページ: 幅480pxで表示

自転車・橋・カメラ・タンポポなど、それぞれ異なるフォーカスエリアを指定できます。

ResponsifyJS無しと有りの場合は、下記のようになります。
まずは、無しの場合。

デモのアニメーション

ResponsifyJS 無し

無しの場合はサイズを変更すると、このように主題のカメラが見えなくなってしまう場合があります。
ResponsifyJSを使用すると、指定したエリアを常に表示することができます。

デモのアニメーション

ResponsifyJS 有り

ResponsifyJSの使い方

Step 1: 外部ファイル

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

Step 2: JavaScript

配置を最適化するタイミング(ロード時・リサイズ時)を指定します。

Step 3: HTML

画像のフォーカス箇所はdata属性で設定します。

「data-focus-left」は小数点で設定し、画像のフルの幅に対するフォーカスエリアの左の位置です。例えば画像のサイズが300pxで、フォーカスエリアが左から90pxにしたい場合は「90/300=0.3」に設定します。top, right, bottomも同様の仕組みです。

top of page

©2017 coliss