もどきといっているが、仕様は全く異なる。「文字をスクロールするスクリプト」を作ったといった方がいいかもしれない。
今回は等加速度直線運動を忠実に(?)再現して現実的な挙動にした。
摩擦は無視できるものとします(・・・。)
加速度は右向きを正として-200(px/sec2)に設定。
動くのは黄色い文字の部分。
右側から登場、(√200000 px/sec)例の加速度で減速し、ちょうど左端で停止。
その後3秒ほどしたらば例の加速度で加速、左側に消えていく。あまり長いと消えきらないかも。
流れる内容は配列に入れておき、innerHTMLで順番に書き換える。
動作はこれを見て下さい。
<公開終了いたしました>
Firefoxで速度が遅いのは改善の余地あり
--追記
どんな感じで処理しているかを紹介すると、
まず、外枠となるdivに、CSSでwidth,overflow:autoを設定
そしてその中に動かす内容をつっこんだdivを作り、position:relativeにする
あとはJava Scriptで位置を変えるようにすればいい。
0 件のコメント:
コメントを投稿