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. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

  2. no-image
  3. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  4. no-image
  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP