Star-Wars-Crawl

Objectives

• Learn more CSS properties
• Improve skill in CSS positioning
• Learn the basics of CSS animation

Instructions

Create a webpage that reproduces the text crawl at the beginning of the star wars movies. Here are the steps:

• Create a new repo on GitHub called "Star Wars Crawl"
• Create an index.html file
• Create a style.css file
• Make use of 'lorem ipsum' to generate fake text (hint)
• Position the content to the center of the page
• Incline the content to perspective (hint: 3D rotation)
• Scroll it to infinity and beyond (astuce: animation, @keyframe, transform, translate3D)
• Personalise the text to tell your adventure at BeCode or, add a cool text / funny story
• Deploy your website online with GitHub Pages

Bonus Objectives (aka To Become CSS Jedi you find)

• Add a star to the background
• Add the blue text of the introduction "A long time ago.."
• Add a funny picture instead of the Star Wars logo
• Add music thanks to the <audio> tag

Resources

• Centre an element on the page
• CSS3 Animations
• CSS3 Transformations
• CSS Animation for Beginners
• Audio tag

Result

https://taggar.github.io/Star-Wars-Crawl/index.html