[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
FocusPoint
FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryのプラグインです。
ちょっとこれだけではわかりにくいですが、焦点を決めて、そこを常に表示するように枠内におさめる、あるようで無かったすばらしいプラグインです。
導入方法
導入は、至って普通です。
まず、jQuery、focuspoint、CSSを読み込みます。
<link rel="stylesheet" href="focuspoint.css"> <script src="jquery.js"></script> <script src="focuspoint.js"></script>
そして、HTMLに下記のように指定します。
<div class="focuspoint" data-focus-x="0.331" data-focus-y="-0.224" data-image-w="400" data-image-h="300"> <img src="image.jpg" alt="" /> </div>
ここで問題になってくるのが、x軸とy軸の座標ですが、作者はわかりやすいように調べるためのjsを用意してくれています。
クリックすると、x軸とy軸の座標が表示されます。
さて、最後に実行文です。
(function($) { $(document).ready(function() { //Fire plugin $('.focuspoint').focusPoint(); }); }(jQuery));
これでOKです。
ウィンドウのリサイズで動かないようにするには
$('.focuspoint').focusPoint({ reCalcOnWindowResize : false });
こうするようです。
作者のサンプルです。
まとめ
画面いっぱいに表示する系のプラグインはよくありますが、フォーカスポイントを決められるのは見た事が無かったのでとてもいいプラグインだと思いました。
結構いろんなシーンで使えるんじゃないかと思います。
ad
関連記事
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[WordPress] 管理画面にテーブル(WP_List_Table)を表示する
WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常