テロップの基本動作を作成する
次に、HTMLに記述したテロップ用の文字を右から左に動かしてみましょう。HTML要素の移動は要素のXY座標を変数に格納しておく方法もありますが、今回はスタイルシートの座標値を直接読み込んで処理します。
先ほど用意したHTMLでは、テロップの要素は以下のようになっています。
<div id="myTelop">テロップのサンプルです。</div>
document.getElementById("myTelop")としてID名「myTelop」のエレメントを取得し、styleオブジェクトのtop、leftプロパティから座標値を読み出します。座標値はstyle属性のleft、topが指定されていれば「エレメント.style.top」「エレメント.style.left」として取得できますが、指定されていない場合は座標値を読み出せません。
そこで、ページが読み込まれた段階で、style属性のleft、topにテロップの初期位置を設定しておきます。今回は以下のように、絶対座標系で(400, 100)ピクセルの座標を指定しています。
document.getElementById("myTelop").position = "absolute";
document.getElementById("myTelop").style.left = "400px";
document.getElementById("myTelop").style.top = "100px";
あとは、タイマーのsetInterval()を使って座標値を定期的に減らしていきます。座標値の減算は以下のようになります。
var x = parseInt(document.getElementById("myTelop").style.left);
document.getElementById("myTelop").style.left = (x - 20) + "px";
leftプロパティを読み出すと「400px」といった単位付きの座標データが返ってきますが、この状態で減算すると正しく計算できないため、parseInt()を使って単位を削除します。
ここまでをまとめたものがサンプル01です。ページが読み込まれると動画の再生が始まり、右から左に文字が流れていきます。
テロップが動画の上を右から左に流れ消えていく
●サンプル01[JavaScript:telopper.js]
// ページが読み込まれたらテロップを移動する
window.addEventListener("load", function(){
document.getElementById("myTelop").position = "absolute";
document.getElementById("myTelop").style.left = "400px";
document.getElementById("myTelop").style.top = "100px";
setInterval("moveTelop()", 100);
}, true);
// テロップを移動させる処理
function moveTelop(){
var x = parseInt(document.getElementById("myTelop").style.left);
document.getElementById("myTelop").style.left = (x - 20) + "px";
}
