May the 4th

It's May the 4th. Known to fans as Star Wars Day since saying the date. May the fourth, sounds like the phrase "May the Force be with you." I've made a few Star Wars projects at various times. I will share them here as part of May the fourth fun.

Star Wars Crawl in CSS

This Christopher Kade tutorial recreates the opening crawl from Star Wars using CSS animation. I completed the tutorial then expanded on the project. When you do a tutorial always tinker with it and add something. It's a good way to learn code.

My version can be seen in action here

My Changes

• Added second section of stars and changed the opacity to give more depth to star field
• Added widescreen bars at top and bottom of screen for Theater look.
• Gave widescreen a small border.
• Made three Paragraphs of text. (original version had only one).
• Used JavaScript to replace all the words in the paragraphs with the same word.
• Created JS loading screen animation.
• Animated tie fighters on the bottom of the screen. These tie-fighters would later be used i a couple ugly sweater CSS designs.

Here's the code I used to make the tie-fighters moved across the footer.

<footer>
  <div class="footer"> <p id="ties"> |-O-| &nbsp; {-o-} &nbsp; |-O-|  &nbsp;&nbsp;</p> </div>
</footer>

.footer {
height: 75px;
background: #000;
z-index: 10;
position: absolute;
width:100%;
bottom:0px;
border-top: 1px solid #6b6936;
text-align: right;
}

#ties {
  position: absolute;
  top: 25%;
  animation-delay: 42s;
  -webkit-animation-delay: 42s;
  animation: ties 16s ease-out 42s;
  animation-iteration-count: 3;
  color: #999;
  width: 100%;
}


@keyframes ties {
  from {
    right: 0;
  }
  to {
    right: 100%;
  }

#ties:after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

CSS Star Wars Ugly Sweater

I did a series of Star Wars Characters CSS Sweater art. All the images in this post are from that series. BB-8 was the first. The series that also included The Child, the Wampa, The Death Star, and the Imperial logo. The Imperial Logo is the cover image for this post.

Other May 4th posts

Star Wars is popular so there's no surprise there are many Star Wars themed posts here on DEV.

DEV is running a May the Fourth costume event. Post a pick of you in a Star Wars Costume for a May the Fourth badge. Costume Contest on DEV

Another Crawl Tutorial
Building Star Wars Crawler with Azure Static Web Apps, A three part series on building the Star Wars Crawl by Glaucia Lemos.

12 open source projects for StarWarsDay
12 open source projects for StarWarsDay A list of some Star Wars projects.

A CSS LightSaber
Oryam's single div light saber.

Do you know of other Star Wars posts? Put them in the comments.

May the fourth be with you.

-$JarvisScript git push