ResponsifyJS

JavaScript

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

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

ResponsifyJS

デモ

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

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

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

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

ResponsifyJS

関連記事

  1. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  2. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  3. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  4. Jquery modal box plugin
  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP