FocusPoint

JavaScript

画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」

FocusPointというjQueryプラグインを使えば、画像の指定した部分を中心にレスポンシブ化することができます。ブラウザ幅を縮小した時に画像の中の見せたい部分が上手く中心に来るようにすることが可能です。とても便利ですね。

[ads_center]

FocusPoint

実際のデモを確認したい方は以下からどうぞ。

FocusPoint

デモ

デモではトカゲの目がフォーカスポイントになっています。なので、画面の横幅を縮小すると、以下のように目を中心にレスポンシブ化します。

FocusPoint

単純にレスポンシブに対応させるだけだと画像全体が縮小されますが、それだと例えばスマホで見た場合ちょっと小さくて分かりづらかったりしますよね。

FocusPoint

関連記事

  1. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  2. Erge Drop Down Menu Control
  3. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  4. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  5. Quttons

    JavaScript

    ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

    Quttonsはボタンをクリックすると形状やカラーが変化して新しいコン…

  6. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP