SlideShare a Scribd company logo
1 of 11
Revolver
Animating 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 */
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: ???;
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); }
}

More Related Content

What's hot

AngularJS Toronto: Ng babel+webpack
AngularJS Toronto: Ng babel+webpackAngularJS Toronto: Ng babel+webpack
AngularJS Toronto: Ng babel+webpackAlan Hietala
 
Deploying Your Favorite Web App To AWS Lambda with Apex up
Deploying Your Favorite Web App To AWS Lambda with Apex upDeploying Your Favorite Web App To AWS Lambda with Apex up
Deploying Your Favorite Web App To AWS Lambda with Apex upRiza Fahmi
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Raymond Camden
 
AWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJSAWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJSRiza Fahmi
 
Jekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloJekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloEdward Meehan
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToRaymond Camden
 
Machine Learning for Web Developers
Machine Learning for Web DevelopersMachine Learning for Web Developers
Machine Learning for Web DevelopersRiza Fahmi
 
Performance Tips In Rails Development
Performance Tips In Rails DevelopmentPerformance Tips In Rails Development
Performance Tips In Rails Developmentqtlove
 
Mtl LT
Mtl LTMtl LT
Mtl LTaknEp
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third PluginJustin Ryan
 
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Nir Kaufman
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularErik Guzman
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy AppsPeter Drinnan
 
Untangling spring week7
Untangling spring week7Untangling spring week7
Untangling spring week7Derek Jacoby
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tipsNir Kaufman
 
Gigigo Rails Workshop
Gigigo Rails WorkshopGigigo Rails Workshop
Gigigo Rails WorkshopAlex Rupérez
 
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)Gáspár Nagy
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSPablo Godel
 

What's hot (20)

AngularJS Toronto: Ng babel+webpack
AngularJS Toronto: Ng babel+webpackAngularJS Toronto: Ng babel+webpack
AngularJS Toronto: Ng babel+webpack
 
Deploying Your Favorite Web App To AWS Lambda with Apex up
Deploying Your Favorite Web App To AWS Lambda with Apex upDeploying Your Favorite Web App To AWS Lambda with Apex up
Deploying Your Favorite Web App To AWS Lambda with Apex up
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
AWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJSAWS Lambda with ClaudiaJS
AWS Lambda with ClaudiaJS
 
Jekyll demo - Refresh Hilo
Jekyll demo - Refresh HiloJekyll demo - Refresh Hilo
Jekyll demo - Refresh Hilo
 
Building a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared ToBuilding a PWA - For Everyone Who Is Scared To
Building a PWA - For Everyone Who Is Scared To
 
Machine Learning for Web Developers
Machine Learning for Web DevelopersMachine Learning for Web Developers
Machine Learning for Web Developers
 
Performance Tips In Rails Development
Performance Tips In Rails DevelopmentPerformance Tips In Rails Development
Performance Tips In Rails Development
 
Mini Curso de Django
Mini Curso de DjangoMini Curso de Django
Mini Curso de Django
 
Mtl LT
Mtl LTMtl LT
Mtl LT
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third Plugin
 
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 
Untangling spring week7
Untangling spring week7Untangling spring week7
Untangling spring week7
 
AngularJS performance & production tips
AngularJS performance & production tipsAngularJS performance & production tips
AngularJS performance & production tips
 
Gigigo Rails Workshop
Gigigo Rails WorkshopGigigo Rails Workshop
Gigigo Rails Workshop
 
Why NodeJS
Why NodeJSWhy NodeJS
Why NodeJS
 
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)
Behavior Driven UI Automation (Agile Testing Days 2017, Potsdam)
 
Tek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJSTek 2013 - Building Web Apps from a New Angle with AngularJS
Tek 2013 - Building Web Apps from a New Angle with AngularJS
 

Viewers also liked

Itepalcingo concepciones de_aprendizaje
Itepalcingo concepciones de_aprendizajeItepalcingo concepciones de_aprendizaje
Itepalcingo concepciones de_aprendizajeIvontv
 
Осень в ДШО "Маленькая страна"
Осень в ДШО "Маленькая страна"Осень в ДШО "Маленькая страна"
Осень в ДШО "Маленькая страна"Школа Лучшая
 
деловая программа
деловая программаделовая программа
деловая программаJohn Dorian
 
Content Analytics for Media Agencies
Content Analytics for Media AgenciesContent Analytics for Media Agencies
Content Analytics for Media AgenciesÓscar Muñoz García
 
4eso 02-paula sarria- pres-socjo
4eso 02-paula sarria- pres-socjo4eso 02-paula sarria- pres-socjo
4eso 02-paula sarria- pres-socjopaula-sarria
 
Breaking down-roe-using-the-dupont-formula
Breaking down-roe-using-the-dupont-formulaBreaking down-roe-using-the-dupont-formula
Breaking down-roe-using-the-dupont-formulaRahmatullah Mardanvi
 
HOW TO BUILD YOUR PERSONAL BRAND
HOW TO BUILD YOUR PERSONAL BRANDHOW TO BUILD YOUR PERSONAL BRAND
HOW TO BUILD YOUR PERSONAL BRANDShiran Sanjeewa
 
Aula 02 programação_c_alunos
Aula 02  programação_c_alunosAula 02  programação_c_alunos
Aula 02 programação_c_alunosJoice Souza
 
Presentacion Tecgvial
Presentacion Tecgvial Presentacion Tecgvial
Presentacion Tecgvial tecgvial
 

Viewers also liked (13)

Itepalcingo concepciones de_aprendizaje
Itepalcingo concepciones de_aprendizajeItepalcingo concepciones de_aprendizaje
Itepalcingo concepciones de_aprendizaje
 
Pakistan
PakistanPakistan
Pakistan
 
PREGUNTAS DE MOTOS
PREGUNTAS DE MOTOSPREGUNTAS DE MOTOS
PREGUNTAS DE MOTOS
 
Reglamento
ReglamentoReglamento
Reglamento
 
Осень в ДШО "Маленькая страна"
Осень в ДШО "Маленькая страна"Осень в ДШО "Маленькая страна"
Осень в ДШО "Маленькая страна"
 
деловая программа
деловая программаделовая программа
деловая программа
 
Content Analytics for Media Agencies
Content Analytics for Media AgenciesContent Analytics for Media Agencies
Content Analytics for Media Agencies
 
4eso 02-paula sarria- pres-socjo
4eso 02-paula sarria- pres-socjo4eso 02-paula sarria- pres-socjo
4eso 02-paula sarria- pres-socjo
 
Breaking down-roe-using-the-dupont-formula
Breaking down-roe-using-the-dupont-formulaBreaking down-roe-using-the-dupont-formula
Breaking down-roe-using-the-dupont-formula
 
Proyectos Emprendedores: Emprendimiento Deportivo
Proyectos Emprendedores: Emprendimiento DeportivoProyectos Emprendedores: Emprendimiento Deportivo
Proyectos Emprendedores: Emprendimiento Deportivo
 
HOW TO BUILD YOUR PERSONAL BRAND
HOW TO BUILD YOUR PERSONAL BRANDHOW TO BUILD YOUR PERSONAL BRAND
HOW TO BUILD YOUR PERSONAL BRAND
 
Aula 02 programação_c_alunos
Aula 02  programação_c_alunosAula 02  programação_c_alunos
Aula 02 programação_c_alunos
 
Presentacion Tecgvial
Presentacion Tecgvial Presentacion Tecgvial
Presentacion Tecgvial
 

Similar to Revolver

How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibautThibaut Baillet
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversGilbert Guerrero
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversGilbert Guerrero
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well Anna Migas
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesAndy Wallace
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesChris Davenport
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform wellAnna Migas
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogigorgentry
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme KickstartPeter
 
Minimalism in Web Development
Minimalism in Web DevelopmentMinimalism in Web Development
Minimalism in Web DevelopmentJamie Matthews
 

Similar to Revolver (20)

How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Presentation html5 css3 by thibaut
Presentation html5 css3 by thibautPresentation html5 css3 by thibaut
Presentation html5 css3 by thibaut
 
Css3
Css3Css3
Css3
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
 
ARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: RolloversARTDM 170, Week 3: Rollovers
ARTDM 170, Week 3: Rollovers
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
Joomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic TemplatesJoomla Day UK 2009 Basic Templates
Joomla Day UK 2009 Basic Templates
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform well
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
 
Theme Kickstart
Theme KickstartTheme Kickstart
Theme Kickstart
 
Html5
Html5Html5
Html5
 
html5_css3
html5_css3html5_css3
html5_css3
 
Minimalism in Web Development
Minimalism in Web DevelopmentMinimalism in Web Development
Minimalism in Web Development
 

Recently uploaded

ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxRosabel UA
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationRosabel UA
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxElton John Embodo
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfTechSoup
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptxiammrhaywood
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxJanEmmanBrigoli
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSMae Pangan
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Celine George
 

Recently uploaded (20)

ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
Presentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptxPresentation Activity 2. Unit 3 transv.pptx
Presentation Activity 2. Unit 3 transv.pptx
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Activity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translationActivity 2-unit 2-update 2024. English translation
Activity 2-unit 2-update 2024. English translation
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docx
 
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdfInclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
Inclusivity Essentials_ Creating Accessible Websites for Nonprofits .pdf
 
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptxAUDIENCE THEORY -CULTIVATION THEORY -  GERBNER.pptx
AUDIENCE THEORY -CULTIVATION THEORY - GERBNER.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
Millenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptxMillenials and Fillennials (Ethical Challenge and Responses).pptx
Millenials and Fillennials (Ethical Challenge and Responses).pptx
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17Field Attribute Index Feature in Odoo 17
Field Attribute Index Feature in Odoo 17
 

Revolver

  • 1. Revolver Animating with HTML5 + CSS3 Web Design Track - Intermediate Level
  • 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); } }