<marquee>タグの代わりをつとめるSCRIPT
HTML5で廃止されたマーキータグの担い手
はてなblogは仕様の通りHTML5に対応した仕組みとなっている。
そのため以前ダイアリーでは使用可能だった<marquee>タグは使用不可となる。
ダイアリーでHTMLに興味をもった方も多いと思います。そしてダイアリーで<marquee>タグを
利用した人も多いと思います。
今回はJavaScriptを使った裏ワザで、その難点を克服しようと思います。
ただ<marquee>タグの方が使い手が良かっただけに、ただ文字を動かすだけでは
物足りないと思いましたので、JavaScriptだからこそできる<marquee>タグにはない
テクニックを紹介していこうと思います。
ソース概要
Sample
<script type="text/JavaScript">
moveString = " ";
moveString2 = "ここにスクロールしたい文字";
moveString3 = " ";
moveString += moveString2; //文字の連結
moveString += moveString3; //文字の連結
moveStringSpare = moveString; //スペアを作り復帰させる
function stringmove(){
moveString = moveString.substring(1,moveString.length);//文字を左から1文字切り取る
document.getElementById("StringTest").innerHTML = moveString;//出力
if(moveString.length == 1){ moveString = moveStringSpare }//もし長さがなければ再度スペアから復帰
setTimeout("stringmove()",100);//0.1秒ごとに処理
}
</script>
<input type="button" onClick="stringmove()" value="マーキー">
<div id="StringTest"> </div>
Sampleでは、inputタグによる制御でしたが本来ならbodyタグに置く感じとなります
それでも置けないんで、演出をどのようにするかは考えてみてください。
こつがいくつかありますので、それも紹介します。
速さを変える
速さを変えるのは簡単です。上記のソースのうち
setTimeout("stringmove()",100);//0.1秒ごとに処理する
赤で示した所の数字を変更します。
基準は「1秒 = 1000」となっておりますので
値を小さくすればするほど速くなり、値が大きければ大きいほど遅くなります。
目安として「1000~50」が良いと思います。それ以外は極端になりますので。
文字を装飾する
文字を装飾するにはCSSで定義するのが良いです。
このdivタグのidはStringTestですから
div#StringTest{
color: #F00;
font-weight: bold;
border: 1px solid #DDD;
background-color: #000;
}
なんて登録して<marquee>代わりしてやると
こんな感じにできちゃいます。
もちろん、JavaScriptですので点滅させることも可能です。4の倍数の文字列の時だけ
文字を消すという方法で実践します。
このようにJavaScriptでは<marquee>だけではできないパフォーマンスをする事ができます。