position absolute/fixed with top property or 3. Practically, we have three significant methods to do this – 1.
ORIGINAL STAR WARS INTRO CODE
We’ve got the text on a screen, it’s leaned as we wanted but we still need to make it move. At this moment we have to decide which way we choose – and this will result in how efficient our code will be. That should create a pretty nice effect of static Star Wars opening crawl. In our test we used 50 pixels but we can see that we “are standing” almost inside the block of text, so we should increase it to at least 150 pixels. We want to get the effect of seeing the crawl very close, so we should consider value, which is much lower than this 600 pixels. In our case our block of text is 600 pixels wide. With this knowledge you can estimate what value you should type here. Vice versa – if you provide really big value, you see an object from a really far distance. If you make perspective value very small, it looks like you are standing very close to the origin of object. Nowadays, my beard is thicker, I switched from tea to coffee and finally I understand perspective property, yay! MDN documentation explains, that this value is a distance between user’s eyes and z = 0 value on invisible plot. But inside, I’ve always wanted to understand what these pixels mean. I must be honest, for a long time (waaaaay too long) I was writing random pixels’ value into this property and checking if it’s correct. For the sake of testing try this value: perspective: 50px To do this we have to put the code below into our styles (in our case these are styles).
In our task we will use parent’s perspective. If you attach perspective to the parent, all children will belong to one perspective. And this is how it works in real life! On the other hand, you may find situations where “ perspective per object” approach is better – mostly when you don’t need realistic behaviour but only nice looking effect. In that case there is no difference but it’s extremely important to use the second approach if you want to transform more than one object. We can attach perspective to the transformed object or a parent of this object. How can we declare a perspective? There are two methods which are a little bit different. As a result, there isn’t any visible perspective. We didn’t declare this perspective, so browser did it for us and set perspective to none. Why? The keyword here is the perspective. It looks more like shrinking than rotating with perspective. If you try to write the code along with me, you can see that this is certainly not what we expected. We want to lean this text forward, in mathematical words, rotate around X axis.Īnd this is also pretty easy to do with CSS – just add this chunk of code to : transform: rotateX(30deg) In our case try to imagine that you put our text into XYZ plot. Currently, on most browsers we can use it in 3 dimensions (x, y, z). It prpvides us a lot of transformation functions but the most important are these, which are connected with translation, rotation and scaling. To make it work we need one simple but very powerful style – transform. Fortunately, now we are going to use all the magic of CSS to make it ride.Īs you can see on the featured photo, our text must be leaned.
Nothing special – just yellow text on a black background, you probably did it in your primary school. This can be done simply by adding this CSS code: Now we need to apply basic styles to the background of our scene and to the crawl’s content. Original Star Wars crawl contains blackish background and yellow text sliding on a screen. The only thing we need in HTML body is this simple piece of code: And I love Star Wars.Īt first, we have to prepare HTML and basic CSS for displaying opening crawl. There are a couple of methods to achieve this goal but we will try to choose the one that has the best performance. You may ask: “ Why Star Wars opening crawl? There are so many interesting topics to choose from.” Yeah, it’s true but this task is relatively easy to implement and, what is more important, we need the most important CSS styles for animations and transformations to achieve it. In this article I want to show a simple way to create animated Star Wars opening crawl using only HTML and CSS. Complex things, like animations or transformations, were made thanks to plain Javascript or, very popular at this time, jQuery framework.Ĭurrently, with CSS 3, HTML 5 and tons of Javascript frameworks for every possible use, we are in a totally different programming world. CSS has immense ecosystem of styles, which help us create, color, filter, transform or even animate objects on a screen. Developers from around the world were using CSS for basic styling because then only that was possible with CSS. 10 years ago nobody expected how frontend is going to evolve in the future.
0 kommentar(er)
