on:2015年11月30日sponsorsレスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。-GitHubResponsifyJSのデモResponsifyJSの使い方ResponsifyJSのデモデモでは、複数の画像がレンガ状に配置されています。幅が狭くなった場合に、上段の自転車だと左を削り、中段のたんぽぽだと右を削る形で表示されたらいいのにな、と思いませんか?ResponsifyJSを使用すると、それぞれの写真の主題を中心に表示されます。自転車・橋・カメラ・タンポポなど、それぞれ異なるフォーカスエリアを指定できます。ResponsifyJS無しと有りの場合は、下記のようになります。無し無しの場合はサイズを変更すると、このように主題のカメラが見えなくなってしまう場合があります。ResponsifyJSを使用すると、指定したエリアを常に表示することができます。外部ファイル当スクリプトとjquery.jsを外部ファイルとして記述します。JavaScript配置を最適化するタイミング(ロード時・リサイズ時)を指定します。HTML画像のフォーカス箇所はdata属性で設定します。/>「data-focus-left」は小数点で設定し、画像のフルの幅に対するフォーカスエリアの左の位置です。画像のサイズが300pxで、フォーカスエリアが左から90pxにしたい場合は「90/300=0.3」に設定します。bottomも同様の仕組みです。Posts関連記事が見つかりませんでした。