ResponsifyJS

JavaScript

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

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

ResponsifyJS

デモ

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

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

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

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

ResponsifyJS

関連記事

  1. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  2. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  3. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  4. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  5. Justified Gallery
  6. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP