マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」
マウスのカーソルを変えたいなんてことがたまにあるかと思います。
そんな時はAwesome Cursor - a jQuery plugin for using FontAwesome icons as custom CSS cursorsを利用することで、多彩なアイコンに簡単に変更できます。
※Chrome and FireFoxのみ
sponsors
使用方法
Awesome Cursorからファイル一式を、また、Font Awesome, the iconic font and CSS toolkitからもファイルをダウンロードします。
<link rel="stylesheet" href="font-awesome.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.awesome-cursor.js"></script>
<script>
$(document).ready(function() {
$('body').awesomeCursor('globe');
});
</script>
なおFont Awesomeのfontも所定の場所にアップする必要がありますので、ご注意下さい。
またアイコンを変更したい場合はFont Awesome Iconsにあるアイコンからfa-を抜いたものを入力いただければ反映されます。
さらにオプションとしては以下の様なものがあり、色なども柔軟に変更できます。
$(document).ready(function() {
$('body').awesomeCursor('code', {
color: 'red', //色
size: 24, //サイズ
hotspot: 'center'//場所
});
});
マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」サンプル
sponsors
「マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」」をシェアする
記事作成:2014年11月18日 09:48
記事URL:http://www.skuare.net/2014/11/fontawesomejqueryjquery_awesom.html
TOP > javascript > その他 > マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」
前の記事:手軽に画像に波紋をかけるjQueryプラグイン「jQuery Ripples」
次の記事:時間に応じて影の位置を変えられるjQueryプラグイン「Four Shadows」
あなたにはこちもお勧め!
jQuery プラグインまとめ!