ドカベンOPをhtml/css/jsで再現してみた

9617 ワード
小ネタ CSS JavaScript ドカベン CSS テキストリンク

どうも、毎度おなじみ中野です。（まだ２回目の投稿）

今回は「ドカベンのオープニングの文字が浮き出るやつ」を作りました。

ドカベンしてみる

コード

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ドカベン</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <b><div class="dokaben" id="kadoben">ドカベン</div></b>
    <input type="text" id="dokabentext" value="ドカベン">
    <input type="button" name="db" id="dokabutton" value="ドカベンする" onclick="dokabenscript()">
    <script src="script.js"></script>
</body>
</html>
style.css
.dokaben{
    font-size:1000%;
    color:#ff0000;
}
#ani0{
    transform: rotateX(88deg);
}
#ani1 {
    transform: rotateX(80deg);
}
#ani2 {
    transform: rotateX(65deg);
}
#ani3 {
    transform: rotateX(50deg);
}
#ani4 {
    transform: rotateX(40deg);
}
#ani5 {
    transform: rotateX(30deg);
}
#ani6 {
    transform: rotateX(22deg);
}
#ani7 {
    transform: rotateX(14deg);
}  
#ani8 {
    transform: rotateX(7deg);
} 
#ani9 {
    transform: rotateX(0deg);
}
script.js
let play=0///今動いているか
let count=1///アニメのカウント
let dokaben = document.getElementById("kadoben");///動作をする要素

function dokabenscript(){
    if(play>0){///もしプレイしていたら
        return;///やらせない（固い意志）
    }

    play=1///動いていることにする

    dokaben.innerHTML=document.getElementById("dokabentext").value;///入力された文字を反映

    count = 0;///カウントをゼロに
    dokaben.id=("ani0")///アニメをゼロに戻す

    let intarval = setInterval(function(){

        count++;///カウントしていく
        dokaben.id=("ani"+count);///IDを書き換え

        if(count >= 9){///アニメが終了したら
            clearInterval(intarval);　//intervalを終わる
            play=0///動いていないことにする
        }

    },200)

}

基本は、setInterval(function(){~},200)で１回づつIDを変更して動いてるかのように見せているだけです。

短時間で考えたスクリプトなので、仕組みは単純です。

みんなも改変して遊んでみよう！

今後やりたいこと

  • 他の再現アプリを作る
  • もう少し再現度を高くする etc...