Skip to content

Instantly share code, notes, and snippets.

@mayth

mayth/gochiusa2.css

Created November 10, 2014 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mayth/4ad0a7e56c89499d0405 to your computer and use it in GitHub Desktop.
Save mayth/4ad0a7e56c89499d0405 to your computer and use it in GitHub Desktop.
Download ZIP
あぁ＾〜心がぴょんぴょんするんじゃぁ＾〜（あぁ＾〜Canvas使わずにぴょんぴょんするんじゃぁ＾〜）
Raw
gochiusa2.css
#pyonpyon-container {
position: relative;
width: 100px;
height: 120px;
}
#kokoro {
position: absolute;
left: 0;
top: 0;
}
Raw
gochiusa2.html
<!DOCTYPE html>
<html>
<head>
<title>あぁ＾〜心がぴょんぴょんするんじゃぁ＾〜</title>
<script src="gochiusa2.js"></script>
<link rel="stylesheet" href="gochiusa2.css">
</head>
<body>
<div id="pyonpyon-container">
<div id="kokoro">心</div>
</div>
</body>
</html>
Raw
gochiusa2.js
var kokoro, y;
document.addEventListener("DOMContentLoaded", function(event) {
kokoro = document.getElementById("kokoro");
y = -9;
setInterval(function () {
++y;
kokoro.style.top = "" + y * y + "px";
if (y == 9) {
y = -y;
}
}, 50);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment