【javascript】【css】犬のメニューバーをお絵描きしました！

暇つぶしにお絵描きしました！
僕は趣味で絵を書くことがあるのですが
数ヶ月前にオフィスで発狂して自分のノートに落書きしていたところ
それを見た友人がその絵を絶賛してくれまして

せっかくだから絵を使って
何かやりたいなと思っていた時に
絵が動いたら可愛いんじゃね？と思ったので

プロトタイプ作ってみました。

【利用するもの】

cssを用いた画像の横移動
jsを用いたフェードインフェードアウト

トイプードル好きの為のDogUIを作りたい

とりあえず今日の目標は”最低限動くメニューバーを作る”こと。
現状では上記のGIF画像の感じのところまでできました！

本当はもっとふわっと表示させてわんわん犬が鳴く時のイメージで
左から右へ文字が拡散していくように作りたかったのですが
時間の制約もあったのでそれはまた今度追加実装することにして…

【./index.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dog UI</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="dog" class="dog" onclick="showContents()">
		<img src="./images/dog.png" height="300px">
	</div>
	<div id="contents" class="contents" style="position:absolute;margin: 0% 0%;visibility:hidden;">
		<div class="img01" style="transform:rotate(2deg);"><img src="./images/wan.png" style="height: 48px;"><span>トイプードルの飼い方</span></div>
		<div class="img02" style="transform:rotate(-2deg);"><img src="./images/wan.png" style="height: 48px;"><span>トイプードルの選び方</span></div>
		<div class="img03" style="transform:rotate(2deg);"><img src="./images/wan.png" style="height: 48px;"><span>トイプードルの愛し方</span></div>
	</div>

	<script>
		var in_n_out = 0;
		var x = 0;

		function showContents(){
			contents = document.getElementById('contents');
			if(contents.style.visibility != 'hidden'){
				fadeOut();
			}else{
				fadeIn();
			}
		}

		function fadeIn(){
			contents = document.getElementById('contents');
			contents.style.opacity = in_n_out;
			contents.style.left = x;
			contents.style.visibility = 'visible';
			if(in_n_out < 1){
				in_n_out = in_n_out + 0.2;
				x = x + 60;
				setTimeout('fadeIn()',100);
			}else{
			}
		}

		function fadeOut(){
			contents = document.getElementById('contents');
			contents.style.opacity = in_n_out;
			contents.style.left = x;
			if(in_n_out > 0){
				in_n_out = in_n_out - 0.2;
				x = x - 60;
				setTimeout('fadeOut()',100);
			}else{
				contents.style.visibility = 'hidden';
			}
		}
	</script>
</body>
</html>

【./css/style.css】

.contents span{
	background:rgba(0,0,0,0.8);
	border-radius: 10px;
	color: #fff;
	font-size:16px;
}

.dog{
	position: absolute;
	margin-left: -150px;
	margin-top: 0px;
	transition: 2s;
}

.dog:hover{
	position: absolute;
	margin-left:0px;
	margin-top: 0px;
	transition: 2s;
}

完全にとりあえず動かしただけなのでコードを綺麗にせねば…。

ぱぱっと作ってどんな感じか見たかっただけなので
当初はjsファイルやcssファイル作る予定も無かったのですが
まあ必要に迫られてつくりました…。

おかげさまで物凄く汚いコードになってるので
後日しっかりとファイル分割して綺麗に書き直して
作りたかった拡散も加えてまた記事書きたいなと思います。

おまけ：元絵