javascriptとCSSアニメでレスを流す実験をしてみたら面白いことになりました笑
5chまとめを昨日からはじめたんだけどレスをニコニコ動画みたいに流せたらいいなと思ってプログラムを組んでみることにしました。
目次を開く
文字を流すCSSアニメーションを作る
まずはCSSアニメーションといったらこれって型があるので作っていきます。
animation-name:"アニメーションの名前";でアニメーションに名前を付け
animation-duration:"時間（秒数など)s";で一回のアニメーションにかかる時間の設定をし
animation-timing-function:ease;で速さに強弱をつけます。
またanimation-iteration-count:"回数";で動きの回数を設定します。
さらにいったりきたりする動きはanimation-direction: alternate;を使います。
CSSは次のようになります。
div.mojinagasi{
animation-name:mojinagasi;
animation-duration:3s;
animation-timing-function:ease;
animation-iteration-count:infinite;
animation-direction: alternate;
}
infiniteは無限回という意味です。
細かい動きの設定
細かい動きの設定は
@keyframes アニメーション名{
処理内容
}
ですることができます。
横の動きの設定
横の動きはx軸方向に動かすのでtransform: translateX(〇px);を使います。
初めの位置を0%,終わりの位置を100%として次のように記述します。
@keyframes mojinagasi{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(150px);
}
}
これで0pxから150pxの位置に横に動くことになります。
javascriptでレスを配列に入れる
次は5chのレスをjavascriptを使って配列に入れていきます。
var resuhairetu=[];
resuhairetu[0]=("18-26ってどこ情報？");
resuhairetu[1]=("終わった");
resuhairetu[2]=("18-26かー！18-28ぐらいかなって思ってたわw");
resuhairetu[3]=("結局7割超えてなきゃダメだったわけだね
18の26か
まあしっかり基準通りだったわけだな
あとは自分の県の発表待つだけか
皆さんお疲れ様でした");
resuhairetu[4]=("1点たりなかった");
resuhairetu[5]=("ボーダー高いなぁ");
resuhairetu[6]=("
終わった。お疲れ様でした。
なんてことだ。");
resuhairetu[7]=("俺の前の番号10人以上落ちてる");
resuhairetu[8]=("列の最後尾だっかんだけど前に座ってたあいつら全員落ちたのかよw
マークずれてなきゃ受かってるわ良かった");
resuhairetu[9]=("18-26かー！18-28ぐらいかなって思ってたわw");
resuhairetu[10]=(">>1
スレ立て乙
前スレのボーダー１８－２６が正解ならギリッギリ何とかなってる可能性が高いが…
まだ解答速報の誤答とマークミスという壁がある
それにしても千葉県パネェ");
レスを表示させる場所を作る
レスを表示させる場所を作ります。
<div class="mojinagasi" id="moji"></div>
時間で制御する
setIntervalを使って時間で制御します
一つのレスが流れる時間を決めてresuhairetu[0],resuhairetu[1]・・と順番に流していきます。
<div class="mojinagasi" id="moji"></div>に流すのでinnerHTMLを使ってそこにレスを入れていきます。
<div class="mojinagasi" id="moji"></div>の要素を取得します。
var elem=document.getElementById('moji');
elem.innerHTMLを使ってそこにレスを順番に入れていきます。
elem.innerHTML =resuhairetu[count];
これを時間で制御する
setIntervalを使うことによってループ文の代わりになります。
これはもう決まった型があってどんな場合にも使えます。
var count=0;
let interval = setInterval(() => {
//プログラムを止める時の処理
if (count >resuhairetu.length) {
clearInterval(interval);
return false;
}
//実行内容
elem.innerHTML =resuhairetu[count];
count++;
}, 1回にかかる時間をミリ秒で書く);
ここまでをまとめたプログラムを書く
var resuhairetu=[];
resuhairetu[0]=("18-26ってどこ情報？");
resuhairetu[1]=("終わった");
resuhairetu[2]=("18-26かー！18-28ぐらいかなって思ってたわw");
resuhairetu[3]=("結局7割超えてなきゃダメだったわけだね
18の26か
まあしっかり基準通りだったわけだな
あとは自分の県の発表待つだけか
皆さんお疲れ様でした");
resuhairetu[4]=("1点たりなかった");
resuhairetu[5]=("ボーダー高いなぁ");
resuhairetu[6]=("
終わった。お疲れ様でした。
なんてことだ。");
resuhairetu[7]=("俺の前の番号10人以上落ちてる");
resuhairetu[8]=("列の最後尾だっかんだけど前に座ってたあいつら全員落ちたのかよw
マークずれてなきゃ受かってるわ良かった");
resuhairetu[9]=("18-26かー！18-28ぐらいかなって思ってたわw");
resuhairetu[10]=(">>1
スレ立て乙
前スレのボーダー１８－２６が正解ならギリッギリ何とかなってる可能性が高いが…
まだ解答速報の誤答とマークミスという壁がある
それにしても千葉県パネェ");
var elem=document.getElementById('moji');
var count=0;
let interval = setInterval(() => {
//プログラムを止める時の処理
if (count >=resuhairetu.length) {
clearInterval(interval);
return false;
}
//実行内容
elem.innerHTML =resuhairetu[count];
count++;
}, 2000);
プログラムを実行してみた
これちょっと笑うね笑
改良を施す
文字を大きくして太くみやすくする。
プログラムを永久に繰り返す
CSSに以下を追加
font-weight:bold; font-size:30px; color: red;
javascriptを修正
修正前
if (count >=resuhairetu.length) {
clearInterval(interval);
return false;
}
修正後
if (count >=resuhairetu.length) {
count=0;
}
だいぶ面白くなりました笑
ページの初めにのせたらインパクトとしては最高じゃないかな笑
