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


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

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

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

【利用するもの】

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


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

とりあえず今日の目標は”最低限動くメニューバーを作る”こと。
現状では上記の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ファイル作る予定も無かったのですが
まあ必要に迫られてつくりました…。

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


おまけ:元絵
S__4235399


最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。


コメントを残す