今日の人気記事

  1. 上下左右に配置できるスクロールしてもついてくるメニュー「PageScroll jQuery Menu」

ページ全体・指定した要素のフォントサイズを変更「creaseFont」

スポンサーリンク

ページ全体、あるいは指定した要素のフォントサイズを変更するプラグイン「Shadow animation」を紹介します。

jQueryプラグイン「creaseFont」

このプラグインを使えば、ページ全体、あるいは指定した要素の文字フォントをクリックアクションで変更することができます。しかもアニメ効果付き!

オプションでは、「フォントの単位」「最大サイズ」「最小サイズ」「サイズ変更の間隔」「アニメ速度」などが設定できます。フォントサイズの単位には「px」「em」「%」など、さまざまなものが利用できます。

スポンサーリンク

デモでは、指定した要素のフォントサイズが変わるように設定しています。「フォントが大きくなる」「フォントが元に戻る」「フォントが小さくなる」をクリックしてみてください。

「creaseFont」のデモ

デモのソース(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

スポンサーリンク

関連記事(一部広告含む)