revolver
TRANSCRIPT
RevolverAnimating with HTML5 + CSS3
Web Design Track -Intermediate Level
Assumes student has completed DASH projects 1 and 2.
Provide a zip file download that contains:
Final project looks like this !
“Unzip” the project folder by double-clicking on it.
Check out what’s inside:
Look inside the images folder
Open revolver.html in Brackets (don’t worry, it’s supposed to be blank!)
Let’s start by giving revolver.html a basic HTML structure:
<!DOCTYPE html><html>
<head> <title>Revolver</title>
</head>
<body> <div id="main"> </div>
</body></html>
Inside the <head>, add a <style> tag and set the body background:
<style>body { background: url(“images/space.jpg”); background-size: cover;}
</style>
Turn on Live Preview →
The background should fill the whole browser:
Now let’s add the sun.
Inside the #main <div>, add an <img> tag with a class and a source:
<img class=“sun” src=“images/sun.gif”>
Then, add a second <img> tag to make the planet appear too.
Live Preview →
Now let’s go back into <style> and add some CSS to center the #main
<style>body { background: url(“images/space.jpg”); background-size: cover;}#main {
margin: 0 auto;width: 800px;position: relative;
}</style>
Check out Live Preview →
Now let’s style the planet class
<style>body { background: url(“images/space.jpg”); background-size: cover;}#main {
margin: 0 auto;width: 800px;position: relative;
} .planet {
width: 70px; /* shrink (or grow) the planet */
position: absolute;left: 315px; /* tell it how far to move
over from the left */top: 350px; /* tell it how far to move
down from the top */}
</style>
Next, style .sun so it has the same position as .planet<style>
body { background: url(“images/space.jpg”); background-size: cover;}#main {
margin: 0 auto;width: 800px;position: relative;
} .planet {
width: 70px; /* shrinks the planet */position: absolute;left: 315px; /* tells it how far to
move over from the left */top: 350px; /* tells it how far to
move down from the top */}
.sun {position: ???;left: ???;top: ???;
}</style>
Now we need to add the transform property and animation code to the .planet class
.planet {width: 70px;position: absolute;left: 315px;top: 350px; transform: rotate(45deg) translateX(250px) rotate(-45deg);
/* This is the vendor prefix code. It sets the animation type, speed,speed curve, and how many times it should run */ -webkit-animation: myOrbit 6s linear infinite; /* Chrome, Safari 5 */ -moz-animation: myOrbit 6s linear infinite; /* Firefox 5-15 */ -o-animation: myOrbit 6s linear infinite; /* Opera 12+ */ animation: myOrbit 6s linear infinite; /* Chrome, Firefox
16+, IE 10+, Safari 5 */
}
Last thing is to add @keyframes right before </style>(not inside .planet !)
/* This is @keyframes. This code controls what the animation looks like */
@-webkit-keyframes myOrbit {from { -webkit-transform: rotate(0deg) translateX(250px) rotate(0deg); }to { -webkit-transform: rotate(360deg) translateX(250px) rotate(-360deg); }}
@-moz-keyframes myOrbit {from { -moz-transform: rotate(0deg) translateX(250px) rotate(0deg); }to { -moz-transform: rotate(360deg) translateX(250px) rotate(-
360deg); }}
@-o-keyframes myOrbit {from { -o-transform: rotate(0deg) translateX(250px) rotate(0deg); }to { -o-transform: rotate(360deg) translateX(250px) rotate(-360deg); }}
@keyframes myOrbit {from { transform: rotate(0deg) translateX(250px) rotate(0deg); }to { transform: rotate(360deg) translateX(250px) rotate(-360deg); }}