ページ全体・指定した要素のフォントサイズを変更「creaseFont」
当ページのリンクには広告が含まれています。
スポンサーリンク
ページ全体、あるいは指定した要素のフォントサイズを変更するプラグイン「Shadow animation」を紹介します。
jQueryプラグイン「creaseFont」
このプラグインを使えば、ページ全体、あるいは指定した要素の文字フォントをクリックアクションで変更することができます。しかもアニメ効果付き！
オプションでは、「フォントの単位」「最大サイズ」「最小サイズ」「サイズ変更の間隔」「アニメ速度」などが設定できます。フォントサイズの単位には「px」「em」「%」など、さまざまなものが利用できます。
スポンサーリンク
デモでは、指定した要素のフォントサイズが変わるように設定しています。「フォントが大きくなる」「フォントが元に戻る」「フォントが小さくなる」をクリックしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="creaseFontのデモでーす。">
<title>creaseFont - jQueryまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="jquery.creaseFont.min.js"></script>
<script>
jQuery(document).ready(function(){
$.creaseFont({
content:'#demo1',
unit:'px',
defaultSize:14,
maxSize:50,
minSize:2,
stepSize:2
});
});
</script>
<style>
body {
font-size: 14px;
}
[id*=demo] {
float: left;
border: solid 1px blue;
width: 400px;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1>creaseFontのデモでーす。</h1>
<ul>
<li>クリック → <span id="fontLarge" style="cursor:pointer">フォントが大きくなる</span></li>
<li>クリック → <span id="fontDefault" style="cursor:pointer">フォントが元に戻る</span></li>
<li>クリック → <span id="fontSmall" style="cursor:pointer">フォントが小さくなる</span></li>
</ul>
<div id="demo1">
<h2>タイトル</h2>
<h3>サブタイトル</h3>
<p>文字がでかくなったりちいさくなっりーーーーーーーーー</p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div id="demo2">
<h2>たいとる</h2>
<h3>さぶたいとる</h3>
<p>文字が変わらないーーーーーーーーーーーーーー</p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>
</html>
jsファイルのダウンロードやオプションなどの詳細はこちらからどうぞ。
» creaseFont
スポンサーリンク