bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」JavaScript2014.09.29画像の指定した部分を中心にレスポンシブ化できるjQueryプラグイン「FocusPoint」FocusPointというjQueryプラグインを使えば、画像の指定した部分を中心にレスポンシブ化することができます。ブラウザ幅を縮小した時に画像の中の見せたい部分が上手く中心に来るようにすることが可能です。[ads_center]FocusPoint実際のデモを確認したい方は以下からどうぞ。デモデモではトカゲの目がフォーカスポイントになっています。画面の横幅を縮小すると、以下のように目を中心にレスポンシブ化します。単純にレスポンシブに対応させるだけだと画像全体が縮小されますが、それだと例えばスマホで見た場合ちょっと小さくて分かりづらかったりしますよね。縮小した時に「ここだけを強調して見せたい」といった部分がある場合は、このプラグインがとても役に立つと思います。SDカードリーダー「HB4008」が実用的でとてもいい!関連記事JavaScriptシングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」Flex-Slider-jQueryは、フレキシブルなスライダーを実装...JavaScript超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」RELLAXは、滑らかなパララックスを実装できるバニラJavaScri...JavaScriptカーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ...JavaScriptレスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」K-Responsive-Menuは、レスポンシブでマルチレベルに対応...JavaScriptフルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」screenfull.jsは画像などの要素をフルスクリーンで表示させる...JavaScriptパララックスなど多彩なチルト効果を実装できる「universal-tilt.js」universal-tilt.jsはパララックスやスケールなど多彩なチ...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。