Star Wars Scrolling Text Tutorial (CSS Animation)

Key Takeaways

[Music] all right so that might not be the official star wars theme tune but it still sets the scene for this scrolling text effect heavily inspired by the movies and this is what i'm going to show you how to make using html and css no javascript whatsoever and we're going to be doing this using keyframe animations along with transforms and the css perspective property it's fairly simple to make and it doesn't include much code so hopefully i'll keep the video quite short and sweet first off though before you start it would be very beneficial if you know at least the basics of html and css before you start this video so i've got a whole html and css crash course right here if you want to learn that first of all and secondly since we are going to be using css animations i would probably suggest you understand at least the basics of css animations and keyframes again i've got a whole playlist on this on this very channel so the link to this is going to be down below and as always i've created files for the course or the video at least and the right here at the star wars text repo on github i've got two different branches i've got the final files which is where all the final code lives and i've also got the starter files which is where we're going to start from so you can select whichever branch you want and then download that code by going to code and then downloading the zip file right here i'm also going to be using visual studio code as my text editor of choice i would recommend you do the same because it's really really good and free you can get it from mac or windows at code.visualstudio.com there is also a package or an extension i'm going to be using for this called live server and i'm going to show you that package in a second all right then so i've opened up the starter files inside vs code and it's really simple there's just two files index.html which is a boilerplate html file has nothing in the body and in the head we just have a title some meta tags and a link to a style sheet called styles.css inside that the only thing we're doing is grabbing a font from google fonts which is roboto right here so that's all we're doing now if i want to preview this file in a browser then i can right click and open with live server and i can do that in any html file the reason i can do that is because i installed the live server package i told you about a minute ago if you want to do the same thing go to the extensions icon over here and you want to look for live server just type it up here it's this package and all you have to do is click the install button once you've done that you might have to restart vs code but after that you can go to any html file or right click it and open with live server that's going to open it up in a browser which is over here woohoo and there's no content in this at the minute so now let's start on the html template okay then so the template for this is gonna be really simple all i'm gonna do is create a div first of all and this is gonna have a class of wrapper so in vs code i can just write div dot wrapper press tab and it creates that div with a class of wrapper for me and then i'm going to do another div inside that called scroll hyphen text so that gives it a class of scroll text so we just have two divs one to wrap everything and then a second div this right here is going to contain the content that we actually scroll on the page so all of the text itself right so let's do an h1 and we'll say star in fact let's do this in capitals star wars and then underneath that i'm going to do an h2 and this will be scrolling text effect like so okay so now i want a few paragraph tags as well so let me do a p and then i'm just going to fill this with lorem ipsum and in vs code i can just type in lorem and then the number of words i want for example 40 and if i press tab it's going to give me 40 words in lorem ipsum so i'm going to duplicate that by holding down alt and shift and pressing down a few times like so so now i've got five paragraph tags of lorem ipsum and that's pretty much all there is to it so i'm going to save that and preview in a browser yep looks absolutely pants so let's style this with some base styles next okay then so now let's apply some styles to this so it doesn't look so crappy on the page let's go to the styles.css and first of all we'll target the body tag now in here i'm just going to give this a background of like a really dark gray so we'll say the background is going to be rgb and it's going to be 20 20 20 and that is kind of a really dark gray almost black color after that i'm going to say overflow will be hidden so basically any text that goes off the browser in any direction it's going to be hidden so a user can't scroll down the page to see the rest of it and that means that we can place the text under the page at the end and we can then scroll it up and they can't scroll down to see that text until it comes up onto the page after that i'm just going to apply a font family to the body of the font we got from google fonts which is roboto okay so that's the body next i want to do the wrapper which is this thing right here the thing that wraps everything and that wrapper is going to display as flex so the whole element centers on the screen and then i'm going to say the height is 100 and then the width is going to be 60 and then i'm gonna say margin of zero top and bottom auto left and right and what that does is position the column of content which is going to be this wide in the middle of the screen and distribute the leftover margin to the left and right so it's going to be 20 left and right so if i save this at the minute we should see a black screen or rather a really dark gray screen and then this text in the middle which you can barely see right now so let's style that as well okay so this is oops this is the scroll text which is this div yeah we want to style that so let's grab that scroll hyphen text and inside first i'm going to apply this a color so that is what i've already prepared i'm not just making this up as i go along it's kind of like a yellow color so if i preview this okay looks better all right so after that i want to make the font size a bit bigger i'm going to say 3 vw and what that does is go off the viewport width so it means the text size is responsive for larger screens it's going to be big for smaller screens it's going to get smaller all right so it just makes it a bit more responsive to text all right so after that i'm going to give this a line height of 1.5 ms that just spaces it out vertically a bit more the font weight is going to be bold and then i'm going to say text align and i'm going to justify this so if you take a look at the text it's not all kind of scooted up to the right over here there's gaps here and there i want to justify it so that it's very square or rectangular so i'm going to say justify right here if we preview this now it's going to look a bit nicer all right so after that i'm going to say position relative okay and that's so that later we can use the top property to move it up and down when we come to do the animation all right so finally i just want to style the h1 and the h2 a little bit here so they align in the center not on the left so let's say down here h1 and h2 and text hyphen align center all right preview that and that is looking good and again the text goes off the screen but we can't scroll down right which is good it's hidden and then later we're going to push all of this text down below the screen we can't scroll down to see it and then we're going to animate it upwards so let's start that animation next all right so now the design is basically looking good and the text is fine let's start the scrolling animation so the first thing i want to do is make the text scroll upwards so to do this animation we're going to be using keyframes and the way we do this is by saying at keyframes and then give it a name for this animation i'm going to call it scroll but call it what you will and then inside we can either use percentages to denote the percentage of the way through the animation and the different properties at that percentage or since we're just going to have a beginning and an end we can say from and to so from and then we're going to define the properties it's going to go from and for that we're going to give the top a value of zero and then underneath that in fact we need a semicolon after this underneath that we're going to go to and then i'll say top is going to be minus 7500 pixels so this is just based on the amount of content i have you might have to switch around the numbers if you have different content etc so if i save this now nothing's going to happen because we're not using this scroll animation anywhere what we need to do is apply this animation to a particular element now in our case that element is going to be the scroll text so all of this content right here so inside scroll text i'm going to say animation to say we want to have this animated the name of the animation which is scroll we defined it right here and then how long we want this animation to take i'm going to say 60 seconds but you can give this a different value if you want it to go faster or slower it's up to you it's going to be a linear progression instead of easing in and easing out or anything like that and then we say forwards just so at the end it doesn't repeat the animation because by default if that wasn't here then it would repeat the animation so let me save this now and preview what this looks like all right cool so now that text is scrolling upwards right but there's a few things wrong with this the first thing is it didn't start down at the bottom of the page and secondly it's also not at an angle and it's not going into the page and further away so we need to add that animation in next now in order to do that we're going to have to use a combination of two things the css perspective property and the transform property okay then so we have our scrolling text now which looks okay but i want to do a few more things first of all what i want to do is start the text a bit lower down the page now to do that i'm going to go up to the body and i'm just going to paste in a couple of styles and what i'm doing is giving this a margin of 50 at the top so it's going to push the content down by 50 and the rest of the margin in each other direction is zero and then it's going to have a position of relative there's a reason for this and that's going to become apparent later on so if i save this now and come back over here if i refresh this now we can see it starts off the page you can see it's pushed down and now it's scrolling upwards so that's pretty good all right so the second thing i want to do is give this some perspective give it some depth so that it can go into the page and further away now to do that we're going to use the css perspective property now we apply this perspective property to an element to make the space inside the element 3d and then we can use a 3d transform inside it so what i'm going to do is apply the perspective property to the wrapper and then everything inside that has a 3d space then so i'm going to come down here and say perspective and i'm going to give this a value of 450 pixels now the higher the number the lesser the effect so if this was a low number like 40 this would have a much higher effect than 450 pixels if i save it at the minute and come over here and refresh then not a lot has changed all we're doing is giving this the ability to have a 3d space inside it but we've not done any transforms inside that yet so for example i could transform this now to make it look as though it's going into the page and to push it further back so for example i can say transform right here and i'm going to say translate in the z direction which is inwards remember x is across y is upwards and z is the 3d plane going in and out of the screen so if i say translate z and give it a minus number that means go further away so it's going to look like the uh the text is further away from us into the screen so first thing you need to do is spell translate correctly and then gotta cannot spell then if i save this and come over here you can see it looks smaller and it's not actually small it's just further away into the page right now the next thing i want to do is make this angled so that it looks as though it's going into the page in that direction and what we want to do is angle it around the x axis remember the x-axis is going across right and if we angle it around that going away it's going to make it look as though it's going into the page so and to visualize that just imagine you have like a hook on a wire going across and if you flick that hook it's going to go around the wire here when it's going away from the page that's the angle i want to give it so if we come over here now and say as well as translate zed we also want to rotate in the x direction and we want to give this an angle let's just say 20 degrees save that and come over here if i refresh well we can't see that that's having a huge effect at the minute you can kind of see the angle yeah but what i'm gonna do is actually take off this translate zed so we can see that a bit clearer save it and can you see now the angle looks as though it's going into the page almost vertical right it's not the full effect we want but we have the angle now okay so what i'm going to do is actually not code these right here i'm going to put these in the animations themselves so to begin with i want to say translate zed and that's going to be zero or by the way these have to be inside a transform property so transform is going to start a translate zero that means it's level on the screen it's not further back it's not nearer to us it's just the same plane as the screen itself so that's the initial z coordinate and let's go to the end one we'll say translate zed here and it's going to go further away so i'm going to use again we need to put this inside the transform don't know what's going on with me and then 2500 pixels away so minus so now it's going to animate away from us into the screen if i save this and refresh you can see how it's going away right it's going to get smaller and smaller over time it's still going up but now it's going away as well it's getting smaller as time goes on so that's that effect that looks pretty good we also want to have the text rotated around the x direction and that's only going to change a little bit as time goes on to begin with i'm going to say rotate x is 20 degrees and you can play with these numbers by the way if you want to i've just found that these ones work well and then at the end rotate x is going to be 21 degrees so it's a very small subtle effect but it does work quite well and if i save this now and preview let me refresh we can see now that text is going into the screen away from us and up so that's a nice effect right it's looking pretty good already now there is one more thing i want to do and that is to fade out the text as it gets further away so around about here i want to start fading out the text so it doesn't go right to the top up there and just get tinier and tidier until it's just a little yellow blob in the top so i'm going to show you how to fade this out at the top next all right then so if i refresh this the last thing i want to do is start to fade out the text around about here as it gets further away into the screen now the way we'll be doing this is by using a pseudo element on the body tag and applying a gradient to that and that gradient is going to go from black at the top to transparent around somewhere here okay so the gradient itself i've created on this tool right here and it's going to look something like this so this bit right here is semi-transparent right and it's fully transparent at the bottom then it's black so as the text comes up to this it's going to start to fade out as it goes over the semi-transparent bit it's going to get fainter and fainter and then when it goes under the black bit it's going to be gone completely so that is the gradient right here that we're going to be applying to this screen so we're going to have that pseudo element over the body tag right here like that so let's come over to the body tag and i want to now say down here body and the way we apply a pseudo element is double colon and then this is going to be after so it's essentially saying after the body at the end of the body and we have to inject some content for this to work but the content itself is just going to be an empty string after that i'm going to say the position of this is going to be fixed and all we're doing by the way here is just inserting an element from the css onto the page which is going to be at the bottom of the body but we're giving it a position of fixed so that it's going to be lifted up to the top of the page and it's going to be over the scroll text and the wrapper as that goes under it so now i'm going to say top is going to be zero so it starts at the very top the width of this element this pseudo element is going to be 100 so it takes up the full width of the screen the height is going to be 50 so it just takes up the top half of the body and then finally i'm going to give this a background gradient so i'm just going to copy this from my repo and paste it in so background and paste this in and this is just a linear gradient so this is how we do a background gradient so we say linear gradients and then this is the direction so 180 degrees which kind of flips it and then it's going from this color which is the same as the background so this is going to be at the top and at 40 percent it's going to start going a bit transparent uh all the way to 100 right so hopefully now if we refresh as it scrolls up and it goes further away we should see at some point the text start to fade out and eventually disappear and there we go it's starting to get a bit fainter and the further it goes up it's now gonna roughly around here disappear awesome okay then so there we go cue the music you