Star Wars Intro Explanation (yes, again)

To start, I have been coding for about 6 months now, (so take anything I say with a grain of salt and know I would love any feedback). Now, on to the content!

Let’s begin with why I decided to write this blog post. I got into programming to solve common problems through the means of technology. After being introduced to HTML and CSS I wanted to learn how to re-make the famous Star Wars Intro. Little did I know everyone has posted the code for it. So here is my take on an explanation :)

Let’s Talk HTML and CSS

If you have not seen Star Wars Episode III for some reason then:
SPOILER ALERT, you’re about to see the intro!
Let’s start with taking a look at this code:

Here is the code pen with the work I reference:

One of my mottos I follow when it comes to HTML is "When in doubt, div".
If it is unclear what tag to use I just div. I like to separate my pieces with a div so all my contents are in their respective little boxes. The classes aren’t too special I just used them to help me grab a specific div later down the line for my CSS. I keep my class names relevant and clear to understand, just in case someone not in my brain wants to understand my work.

.star-wars-intro-block {
  display: flex;
  justify-content: center;
  position: relative;
  height: 250px;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 600%;
  font-weight: 600;
  font-spacing: 5px;
  line-height: 150%;
  perspective: 400px;
  text-align: center;
}

the .star-wars-intro-block class selector changes the color and the size of the text from a regular text to look like the intro format.. I centered the content with justify-content and consistently position the content relative to the rest. For the most part it’s pretty self explanatory but I will cover perspective. This gives the text a 3-D look of being tilted at an angle to the viewer.

.scroll {
  position: relative;
  animation: scroll 70s linear;
}

the .scroll class selector begins our text animation and this class will also be used for our keyframes. The most interesting piece of these 2 lines of code is that we can alter the direction and speed of the animation without having to write JavaScript. It does the work for us!

@keyframes scroll {
  0% {
    top: -100px;
    transform: rotateX(20deg) translateZ(0);
  }
  100% {
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}

With @keyframes might seem odd here, so let me explain. So let's talk about why there are what looks like a 0% and 100% as a selector with their own properties. For simplicity let us just associate 0% as secret code for "from" and 100% as secret code for "to". So in human terms, "Do some stuff here and by the end of it you should have this done". This is what gives us the bottom to the top movement of the text that is so iconic.

.gradient {
  position: relative;
  width: 100%;
  background-image: linear-gradient(0deg, transparent, black 75%);
  min-height: 60vh;
  top: -25px;
  z-index: 1
}

Hey you are almost done reading my first blog post!
I'll briefly cover the .gradient class selector so you can go back to looking at memes. This is the final piece that lets the words fade into the dark and cold void of a galaxy far far away. I wanted to make it look even so I stretched it to 100% on the width and made the position relative to the element. To add the fade-out I used a gradient through background-image. I let the color be transparent black at 0 degrees for 75%. The min-height adjusts the height of the fade. To ensure that the newly made fade is on top of the text I used z-index to customize in what order I want my content to stack.

That’s it! If you are in the "crawling stage" of HTML and CSS, hopefully, this was an "Oh! A piece of candy!" moment and you keep following the trail to dive deeper into the depths of these languages.

"May the force be with you"

Angie S. Unda

If you have any questions and/or feedback for growth DM me @a.soledad.u on Instagram.

credit: @carmencodes on Instagram and google of course.