流れるニュースのように、小さい窓にメッセージを表示させます。
メッセージは一定時間ごとに滑らかに１行づつスクロールしていきます。
スクロールして見えなくなったメッセージは最後尾に付け替えられ、無限にスクロールし続けます。
結構短いコードでそれなりのものができたのですが、スクロール中にちらちらするのは何故でしょうか？一旦全部消してから書き直しているように見えますね。
【サンプル】
(function(e) {
var scroll = function() {
var child = e.firstChild;
while (child.nodeName == '#text') child = child.nextSibling;
if (child.offsetHeight > e.scrollTop) {
e.scrollTop += 1;
setTimeout(scroll, 50);
} else {
e.appendChild(e.removeChild(child));
e.scrollTop = 0;
setTimeout(scroll, 5000);
}
};
setTimeout(scroll, 5000);
})(document.getElementById('headline'));
【サンプルの実行】
今日はとても良い天気です。
午後から暑くなるでしょう。
熱中症にご注意ください。
節電にもご協力ください。
