2. Assumes student has completed DASH projects 1 and 2.
Provide a zip file download that contains:
Final project looks like this !
3. “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!)
4. 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>
5. 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:
6. 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 →
7. 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 →
8. 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 */
9. 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: ???;
10. 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 */
}
11. 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); }
}
