oitake blog

いろいろリンク

おすすめリンク

最近のエントリー

カテゴリー

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

スポンサーサイト

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


2009.12.16 Wednesday | | - | - | -

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

※コードの事情により、Safariでは動作しないようにしました(20061124)。
前回の「タイポ!スクリプト」第1版に修正を加えました。
第1版は使用せず、この第2版を使用してください。
ちなみに「タイポ!」は、

こんな風にテキストをアレンジする

スクリプトです。

・Opera 9でも動作するようになりました。
・前回はテキストの1文字1文字をspan要素で囲み、さらにテキスト全体をspan要素で囲みましたが、今回は全体をspan要素で囲んだりしません。よって、スタイルシートを適用しやすくなりました。
・ソースコードをキレイにダイエット。

使い方は第1版とほぼ同じです。

1.ウェブページやテンプレートのなるべく最後の方ソースコードをペーストするか、なるべく最後の方.jsファイルを読み込んでください。
2.エフェクトを適用させたい要素にclass属性を設定してください。値は「typo」で始まる任意の文字列です。
3.キレイにカスタマイズしたい方は、スタイルシートを調整します。「タイポ!」は1文字1文字をspan要素で囲むので、「.typo span」セレクタにスタイルシートを適用することになると思います。
4.もっとカスタマイズしたい方は、スクリプトのユーザー定義変数を調整します。■で始まるコメントに続く変数です。

要望・不具合はコメントへどうぞ。

<ソースコード>

<script type="text/javascript">
<!--
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// タイポ!スクリプト第2版 (C) 20061121 oitake.jugem.jp
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var typo=
{
// ■フォントの可変サイズ(%)
s1:50,
// ■フォントの最小サイズ(%)
s2:100,
// ■フォントの揺れ幅(em)
a1:0.2,
zf:document.body.currentStyle && document.body.currentStyle.zoom ? 'zoom' : 'font-size'
};
typo.main=function()
{
if(navigator.userAgent.toLowerCase().indexOf('safari')!=-1)
{
return;
}
this.a2=typo.a1/2;
this.cl=0;
this.glob(document.body);
};
typo.glob=function(o)
{
if(o.nodeType==3 && this.cl)
{
for(var i=0; i<o.nodeValue.length; i++)
{
var s=document.createElement('span');
var t=document.createTextNode(o.nodeValue.charAt(i));
if(!o.nodeValue.charAt(i).match(/¥s/))
{
s.style.cssText='position:relative;'+this.zf+':'+(Math.random()*this.s1+this.s2)+'%;left:'+(Math.random()*this.a1-this.a2)+'em;top:'+(Math.random()*this.a1-this.a2)+'em;';
}
s.appendChild(t);
o.parentNode.insertBefore(s,o);
}
o.nodeValue='';
}
if(o.firstChild)
{
if(this.cl)
{
this.cl++;
}
else if(o.className.match(/(?:^|¥s)typo/i))
{
this.cl=1;
}
this.glob(o.firstChild);
if(this.cl)
{
this.cl-=1;
}
}
if(o.nextSibling)
{
this.glob(o.nextSibling);
}
};
typo.main();
//-->
</script>

<スタイルシートのテンプレート>

<style type="text/css">
<!--
/*
* タイポ!スクリプト第2版 (C) 20061121 oitake.jugem.jp
*/
.typo span
{
padding:0.1em;
}
-->
</style>
2006.11.22 Wednesday | 02:09 | ライブラリ | comments(0) | trackbacks(1)

スポンサーサイト


2009.12.16 Wednesday | 02:09 | - | - | -

トラックバック

oitake blogさんで配布されているタイポ!とビヨンビヨンJSも導入してミタコレ!
赤裸々航海記 | タイポ!とビヨンビヨン | 2006/12/16 7:58 PM

アーカイブ

広告