Javascript Patchworker - 文字が伸び縮み

このスクリプトについて
　スタイルシートのletter-spacing属性を操作することで、文字が伸び縮みしているようなビジュアルのスクリプトを作成できます。サンプルは左側の文字を固定していますが、ブロック要素（<p>などですね）に適用することで中央や右に固定して伸び縮みするスクリプトにもなります。

実行例

文字が伸び縮みします。

関連

CSS : テキスト関連

対応ブラウザ
WIN IE 4.0～ NN 6.0～　MAC IE 4.0～ NN 6.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文字が伸び縮み</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>

<h3 id="motion">文字が伸び縮みします。</h3>

</body>
</html>

ユーザ設定
　ユーザーが設定する変数は、targetId、moveTime、limitです。
　targetIdには対象とするオブジェクトのIDを設定してください。またこの値を変更した場合にはCSSのほうにも多少の変更が必要です（インフォメーション参照）
　moveTimeには移動の時間を設定します。数字を小さくするほど速く動きます。
　limitには最も伸びたときの文字間隔の最大値を設定します。適用する要素の周囲などを考え、試行錯誤をして設定してください。

　また、CSSの方でletter-spacingとtext-alignを設定しなければなりませんが、text-alignを設定するのはブロック要素に適用する場合のみです。

JavaScriptのTOPに戻る　　

TOPに戻る