ResponsifyJS

JavaScript

画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

ResponsifyJSは画像のなかで見せたいエリアを保持させながらレスポンシブに対応できるjQueryプラグインです。ブラウザ幅に合わせて画像が単純に縮小・拡大するのではなく、見せたい部分にフォーカスさせることが可能です。

ResponsifyJS

デモ

デモではたくさんの画像が並べられています。ブラウザ幅を縮小してみると分かると思いますが、それぞれの画像でメインとなる部分を残しながら縮小していきます。

フォーカスエリアはimgタグにdata属性を用いて指定できます。画像1枚に対してdata-focus-left、data-focus-top、data-focus-right、data-focus-bottomの数値を指定できるのでとても便利ですね。

「スマホ画面だと画像全体が小さくなってメインの被写体がわかりづらい!」なんてときに活用してみてはいかがでしょうか?

というわけで、画像にフォーカスエリアを設定してレスポンシブに対応したい方は、ぜひResponsifyJSをチェックしてみてください。

ResponsifyJS

Anker SoundCore Sportお風呂やアウトドアに最適な防水Bluetoothスピーカー「Anker SoundCore Sport」前のページ

エンドレスに流れていくコンテンツスライダー「EndlessRiver」次のページEndlessRiver

最近の記事

  1. 紫陽花とセミの抜けがら
  2. クラブハウスサンド 石窯カンパーニュ
  3. 2022.08.9

  4. 柿の実
PAGE TOP