FocusPoint

JavaScript

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

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

[ads_center]

FocusPoint

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

FocusPoint

デモ

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

FocusPoint

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

FocusPoint

関連記事

  1. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  2. jquery-scrollstop

    JavaScript

    スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

    jquery-scrollstopはスクロールの開始・終了時のイベント…

  3. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP