Skip to content

Instantly share code, notes, and snippets.

@walterrenner

walterrenner/rotation.html

Created February 8, 2013 15:46
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 walterrenner/4739836 to your computer and use it in GitHub Desktop.
Save walterrenner/4739836 to your computer and use it in GitHub Desktop.
Download ZIP
Rotation Example
Raw
rotation.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
::selection {
background-color: #000;
color: #fff;
}
#wrapper {
width: 300px;
margin: auto;
}
#logo {
position: absolute;
top: 50px;
width: 300px;
height: 300px;
background-image: url(http://gdd11-html5-offline.googlecode.com/git-history/f4228b85cfe768dedfe5faa5cb3b302c61596cce/images/chrome-logo.png);
background-size: 100%;
background-repeat: no-repeat;
-webkit-animation: rotate linear infinite;
-webkit-animation-duration: 10s;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
#options {
}
span {
color: #eee;
background-color:#1e5184;
font-size:3em;
border-bottom: 1px solid #555;
padding:10px;
}
</style>
</head>
<body>
<section id="wrapper">
<div id="logo"></div>
<div id="options"><input onchange="OnSliderChanged(this)" type="range" id="points" min="0.1" max="10" step="0.1" value="10"></div>
</section>
<script type="text/javascript">
function OnSliderChanged (slider) {
console.log("slider value changes to" + slider.value)
setSpeed(slider.value);
}
function setSpeed (speed) {
$("#logo").css('-webkit-animation-duration', speed+"s");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment