かなこと仲良く数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。普通の生徒はコメント欄で質問し放題です! 特別生徒は一名募集していて毎週日曜日に専用の問題が出て、ツイッターで質問し放題です笑

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
スレ立て乙
前スレのボーダー18-26が正解ならギリッギリ何とかなってる可能性が高いが…
まだ解答速報の誤答とマークミスという壁がある
それにしても千葉県パネェ");

レスを表示させる場所を作る

レスを表示させる場所を作ります。

<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
スレ立て乙
前スレのボーダー18-26が正解ならギリッギリ何とかなってる可能性が高いが…
まだ解答速報の誤答とマークミスという壁がある
それにしても千葉県パネェ"); 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;
        }

だいぶ面白くなりました笑

ページの初めにのせたらインパクトとしては最高じゃないかな笑


提供スレ様

第25回介護支援専門員試験スレ【ケアマネ】その4