May the 4th
Tags: maythefourth, starwars, css
Published: 2022-05-04 13:22:58

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.

![bb-8 on a green ugly sweater. It is snowing.](https://dev-to-uploads.s3.amazonaws.com/i/2x9k2laxphqt98kt5tpw.jpg)


##Star Wars Crawl in CSS

[This Christopher Kade tutorial recreates](https://dev.to/christopherkade/developing-the-star-wars-opening-crawl-in-htmlcss-2j9e) 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](http://christopherleejarvis.com/CssCrawl/)

### 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.
 
```html
<footer>
  <div class="footer"> <p id="ties"> |-O-| &nbsp; {-o-} &nbsp; |-O-|  &nbsp;&nbsp;</p> </div>
</footer>

```

```CSS
.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](https://dev.to/jarvisscript/ugly-sweater-css-36am) was the first. The series that also included [The Child](https://dev.to/jarvisscript/ugly-sweater-css-the-child-l41), [the Wampa](https://dev.to/jarvisscript/ugly-sweater-css-winter-wampa-land-360j), [The Death Star,](https://dev.to/jarvisscript/ugly-sweater-css-that-s-no-moon-l7g) and the [Imperial logo](https://dev.to/jarvisscript/ugly-sweater-css-the-imperial-logo-33p9). The Imperial Logo is the cover image for this post.


![grogu in his cradle](https://dev-to-uploads.s3.amazonaws.com/i/gvc4s5mr760rhmv3asw5.jpg)

## 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](https://dev.to/devteam/join-the-star-wars-costume-contest-on-dev-4642)

**Another Crawl Tutorial**
[Building Star Wars Crawler with Azure Static Web Apps](https://dev.to/azure/building-star-wars-crawler-with-azure-static-web-apps-part-1-3o39), 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](https://dev.to/leereilly/may-the-fourth-be-with-you-4hje) A list of some Star Wars projects.

**A CSS LightSaber**
[](https://dev.to/oryam/css-light-saber-3kni) 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
```