人間ハンドスピナー続編

しっぽをつかんで回せ！

このアプリは、前作の「人間ハンドスピナー」に更なる機能を加えたものです。スマホで操作前提に作られているため、タッチやマウスの操作で回すことができます。スピナーをマウスでドラッグしたり、タッチしたりして、しっぽをつかんで回して遊びましょう！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>人間ハンドスピナー続編</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			text-align: center;
			background-color: #FFFFCC;
			font-size: 20px;
			font-family: Arial, sans-serif;
		}

#spinner {
			display: inline-block;
			border-radius: 50%;
			border: 5px solid #4CAF50;
			border-top: 5px solid #FF9800;
			width: 50px;
			height: 50px;
			animation: spin 1s linear infinite;
			cursor: pointer;
			margin-top: 50px;
		}

@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
	</style>
</head>
<body>
	<h1>人間ハンドスピナー続編</h1>
	<p>しっぽをつかんで回せ！</p>
	<div id="spinner"></div>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var spinner = document.getElementById("spinner");

spinner.addEventListener("mousedown", function() {
				spinner.style.animationPlayState = "paused";
			});

spinner.addEventListener("mouseup", function() {
				spinner.style.animationPlayState = "running";
			});

spinner.addEventListener("touchstart", function() {
				spinner.style.animationPlayState = "paused";
			});

spinner.addEventListener("touchend", function() {
				spinner.style.animationPlayState = "running";
			});
		});
	</script>
</body>
</html>