Skip to content

Instantly share code, notes, and snippets.

@jueyang

jueyang/image-frame.png

Last active October 15, 2017 04:03
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 jueyang/f40468c4de64dfd6ac1cc1f972cfd10b to your computer and use it in GitHub Desktop.
Save jueyang/f40468c4de64dfd6ac1cc1f972cfd10b to your computer and use it in GitHub Desktop.
Download ZIP
bike (circa 2012)
Raw
index.html
<style>
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2000ms linear infinite;
animation:rotating 2000ms linear infinite;
}
.paused{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
header {
margin-left:10%;
}
header img {
position:absolute;
}
#frame {
margin-top:100px;
margin-left:100px;
}
#front-wheel {
margin-top:160px;
margin-left:60px;
}
#rear-wheel {
margin-top:160px;
margin-left:204px;
}
button {
background:#fff;
padding:10px;
}
</style>
<body>
<header class='central pad-top'>
<img id="frame" src="image-frame.png">
<img id='rear-wheel' src="image-rear-wheel.png">
<img id="front-wheel" src="image-front-wheel.png">
</header>
<button id="button">click me</button>
</body>
<script type="text/javascript">
function start(id){
document.getElementById(id).setAttribute("class","rotating");
}
function pause(id){
document.getElementById(id).setAttribute("class","rotating paused");
}
function startpause(){
if (document.getElementById("rear-wheel").className == "rotating") {
pause("rear-wheel");
pause("front-wheel")
} else {
start("rear-wheel");
start("front-wheel");
}
}
document.getElementById("button").onclick = startpause;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment