[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS
Post on:2015年11月30日
sponsors
レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。
フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
ResponsifyJS
ResponsifyJS -GitHub
ResponsifyJSのデモ
デモでは、複数の画像がレンガ状に配置されています。
デモページ: 幅1,200pxで表示
幅が狭くなった場合に、上段の自転車だと左を削り、中段のたんぽぽだと右を削る形で表示されたらいいのにな、と思いませんか？
ResponsifyJSを使用すると、それぞれの写真の主題を中心に表示されます。
デモページ: 幅480pxで表示
自転車・橋・カメラ・タンポポなど、それぞれ異なるフォーカスエリアを指定できます。
ResponsifyJS無しと有りの場合は、下記のようになります。
まずは、無しの場合。
ResponsifyJS 無し
無しの場合はサイズを変更すると、このように主題のカメラが見えなくなってしまう場合があります。
ResponsifyJSを使用すると、指定したエリアを常に表示することができます。
ResponsifyJS 有り
ResponsifyJSの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
|
1 2 3 4 5 |
<head> ... <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="responsify.min.js"></script> </head> |
Step 2: JavaScript
配置を最適化するタイミング（ロード時・リサイズ時）を指定します。
|
1 2 3 4 5 6 |
$(window).load(function() { $('a img').responsify(); }); $(window).resize(function(){ $('a img').responsify(); }) |
Step 3: HTML
画像のフォーカス箇所はdata属性で設定します。
|
1 2 |
<img src="image.png" alt="" data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" /> |
「data-focus-left」は小数点で設定し、画像のフルの幅に対するフォーカスエリアの左の位置です。例えば画像のサイズが300pxで、フォーカスエリアが左から90pxにしたい場合は「90/300=0.3」に設定します。top, right, bottomも同様の仕組みです。
sponsors
