도카벤 OP를 html/css/js에서 재현해 보았다
이번에는 「도카벤의 오프닝의 문자가 떠오르는 녀석」을 만들었습니다.
도카벤 해보자
코드
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) 로 1회씩 ID를 변경해 움직이고 있는 것처럼 보이고 있을 뿐입니다.단시간에 생각한 스크립트이므로, 구조는 간단합니다.
모두 변경하고 놀자!
앞으로 하고 싶은 일
Reference
이 문제에 관하여(도카벤 OP를 html/css/js에서 재현해 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakano1120/items/6636f6f9579aff5479ab텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
