oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

20101012:コメントとトラックバックを停止したことにより、このサイトはアーカイブとなりました。以降、ご連絡はみもねるのウェブサイトへお願いします。
20100703:新ナマコメ(ナマコメ 2)を公開しました。コメントビューア付きで送信面においてもパワーアップしています。
旧ナマコメは将来的に使用できなくする予定なので、可能な限り新ナマコメをお使いください。
20091127:oitake は みもねる になりました。当ブログは無期限更新停止となります。詳細は最新の記事をご覧ください。

スポンサーサイト

一定期間更新がないため広告を表示しています


2009.12.16 Wednesday | | - | - | -

タイポ!スクリプト第1版

「タイポ!スクリプト」第2版を使ってください。

「タイポ!」のウェブページ組み込み用スクリプトです。
ページを開くと、任意のテキストがタイポグラフィックっぽくアレンジされます。


▲こんな感じ。


▲こんな見せ方も。

スタイルシート次第で色んな見せ方が考えられます。
使ってみたいという方は、まず設置方法A設置方法Bを実行の上、設置方法(共通)を実行してください。

<設置方法A>

1.スクリプトファイルをウェブサイトへアップロードする。
2.ウェブページに下記コードをペーストする。

<script src="(.jsファイルへのパス)/oi_typo.js" type="text/javascript"></script>

<設置方法B>

1.この記事の続きからソースコードをコピーする。
2.ウェブページにペーストする。

<設置方法(共通)>

3.エフェクトを適用したいテキストを含むタグにclass属性を設定する。
  属性値は「typo」で始まること。また、spanタグは避けた方が良いかも。
  例:「class="typo_special"」「class="title typo"」
4.ウェブページとにらめっこしながらスタイルシートを調節する。
  「margin:1px;」や「padding:1px;」を設定すると良い。

<注意事項>

・OperaとMacintoshのIE・NN以外で正常に動作します。
・アクセスカウンターを設置しているページでは、「window.onload」部分を展開した方が良いかもしれません。
 詳しくはこのブログのソースコードを参照のこと。

<ソースコード>

<script type="text/javascript">
<!--
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// タイポ!(スクリプト) (C) 20061120 oitake.jugem.jp
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var typo={};
// - - - - - - - - - - - - - - - -
// ユーザー定義変数
// - - - - - - - - - - - - - - - -
// フォントの可変サイズ(%)
typo.s1=75;
// フォントの最小サイズ(%)
typo.s2=75;
// フォントの揺れ幅(em)
typo.a1=0.4;
// - - - - - - - - - - - - - - - -
// プログラム主要部分
// - - - - - - - - - - - - - - - -
typo.a2=typo.a1*0.5;
typo.w=window.onload;
window.onload=function()
{
if(typo.w)
{
typo.w();
}
if(!window.opera)
{
typo.l=0;
typo.g(document.body);
}
}
typo.g=function(o)
{
if(o.firstChild)
{
if(typo.l)
{
typo.l++;
}
else if(o.className.match(/(?:^|¥s)typo/i))
{
typo.l=1;
}
this.g(o.firstChild);
if(typo.l)
{
typo.l--;
}
}
if(o.nextSibling)
{
this.g(o.nextSibling);
}
if(o.nodeType==3 && !o.nodeValue.match(/^[¥s ]*$/) && typo.l)
{
var e=document.createElement('span');
for(var i=0,s=''; i<o.nodeValue.length; i++)
{
s+='<span class="typo" style="position:relative;'+(document.all?'zoom':'font-size')+':'+(Math.random()*typo.s1+typo.s2)+'%;left:'+(Math.random()*typo.a1-typo.a2)+'em;top:'+(Math.random()*typo.a1-typo.a2)+'em;">'+o.nodeValue.charAt(i)+'</span>';
}
e.innerHTML=s;
o.parentNode.replaceChild(e,o);
}
};
//-->
</script>

スポンサーサイト


2009.12.16 Wednesday | 20:20 | - | - | -

コメント

可読性を尊重するなら下記パラメータがオススメ。

// フォントの可変サイズ(%)
typo.s1=50;
// フォントの最小サイズ(%)
typo.s2=100;
// フォントの揺れ幅(em)
typo.a1=0.2;

あと、

.typo
{
margin:1px;
padding:1px;
}
oitake | 2006/11/21 1:59 AM
初めまして。戦いのあとから辿ってまいりました。
とても面白いスクリプトに出会えました。ブログバトラーに感謝。
しいたけ | 2007/01/07 9:20 PM