How to make an awesome text reveal effect with just CSS!

what up team my name is Paul Lewis it is lovely to have you aboard today and especially so if you're brand new to the channel welcome I've noticed from the comments in the other videos that you definitely want to see a more advanced build tutorial and also something on the serviceworker so I'm gonna try get to those at some point I would also like to do a Q&A so if you've got questions and you think I can answer them then do feel free to comment below and I will try and get there but today I want to talk about CSS or in fact how you can make something like this that's fun without any JavaScript whatsoever it is time for the intro [Music] [Music] okay this is very exciting to be able to do this I've been looking forward to doing this one for a few weeks but I'm not gonna be able to cover every little detail of it I'm gonna try and cover it as I build things as I type up the code just so that you can follow along and and see whatever but if you really want to get into the deep guts of it the source code will be on arrow twists comm slash tutorials which has been the historical place for putting all my tutorial stuff which I haven't done for a good long time return to the tutorial vibes Paul done good fee you okay on screen then we have a little bit of HTML just set up pretty much nothing in there just you know has been linked to the stylesheet viewport meta tag in the title and so on so not a lot going on in there and in the CSS I have something that will essentially reset the margins and padding of HTML and body and their width and height 200 percent so they just take up the full viewport and the body I've set to display flex straight in with a pro tip here I've set the body to display flex with some flex box and the align items and justified content both the center this is the quickest and easiest way to vertically and horizontally aligned content since we've have flex box it's been a lot more straightforward to do vertical alignment in CSS and this will mean that whatever we put in the page will be in the middle just as you saw before so what are we gonna do we're gonna drop in a div you could do this with custom elements I'm not doing that today I just want to keep things nice and simple I'm gonna call this reveal I'm gonna drop that in there and inside what I want to do when fellow it's just style that up to begin with let's do that reveal okay so I reveal because we had a bit of a revealing text that's why I'm calling it that doesn't really matter what we want to call it to be honest I'm gonna say with 320 pixels height 180 pixels so this is 16 by 9 ratio again you could not hard code it you could hard cut it to other values whatever works really I'm gonna do background I'm gonna do deep pink just so that we can see something on-screen border radius whoa border radius 3 pixels let's see how that looks now my screen is zoomed in that's why this looks so big and that's because this is quite a big screen and so on so you wouldn't let that bake on your screen I'm sure but hopefully you get the idea of so we've got a pink box in the middle marvellous next we want to probably get rid of that let's actually add in an image so I actually have some images that I can use I get them from unsplash if you've never seen unsplash.com have a look at that I'll link it in the description below very very cool amazing photography that you can just use in your projects it's great so I've got a picture of a person overlooking and work a lake maybe I'm gonna I'm gonna put that in the alt tag alt equals person sitting on a wall overlooking a lake hmm as we hover over this we want it to kind of scale up and get bigger so what I'm going to do is I'm going to put a transform now I always animate with transforms and opacity wherever possible it's amazing how far you can get just doing that there's a very good performance reason for doing it I'm not going to talk about that particularly other than to say it's faster and where you can you want to think in transforms and opacity if you in fact I'll link some stuff in the description below where I go into a lot of detail about why that matters but for now we're just going to scale this down to not 0.9 and we're going to do a transition on transform not 0.4 seconds and then I'm just going to do a nice easy out which is in my head is not naught not point 3 and 1 that should do that and then what we do is we do a reveal hover and we're gonna say transform scale one you could say scale none that would also do this so now as I hover over it get a nice little scale up effect there it feels like you should have a cursor of pointer on it as well so that you get that nice a little hand cursor when you're hovering over it that implies a button so maybe this could be an anchor or a button element but if it is then use that in the in the markup I'm just I'm not doing that right now just to demonstrate the point do the right thing semantically make sure you go for the correct tag correct le monde alright let's have a look let's add this shadow that's a good thing to add so I use for things like shadows I typically use pseudo elements so I'm going to do content empty there and I'm going to say display:block sure position it absolute so that it can sit behind the image and in order to make that work I'm gonna have to make this position relative okay so with that in mind we're gonna say width 1 + % height 100% background I'm saved let's do that as a solid black and look at that yeah that's overriding sitting on top of the image and the reason it's thing let's put the image is because its position absolute and the image is positioned static so what we'll do is we'll reveal image position relative that is actually going to fix it because what's happening is it's saying the first child which is that before the pseudo element is position absolute the image is positioned relative so it will stack them in source order which is good that's exactly what we want and what I'll do is let's add a bit of a blurry shadow to it so you can start to see it again so in order to do that we'd do a box shadow and we'll do naught which is that X naught which is the Y let's do 12 pixels for the blur and 6 pixels for the spread and then we'll make that a solid black as well now you can see what actually got the shadow and obviously it's not looking very nice yet but it will do it look a lot nicer in a moment so I'm gonna do I'm gonna bring it in width and height wise and I'm gonna do that with absolute pixel measure rather than say a percentage measure as because otherwise it would be it will be twice the width oh that would be 16 ninths worth of change because of the percentages it's not 2 square if it was a square then you could just say like 90 percent you'll be like but if I do that here not gonna work out well so I'm just going to make it absolute value of 20 pixels and that will do that and then we need to move left take 20 pixels so we say 10 pixels there and then top something like 15 pixels see if that works okay so now the shadow appears underneath the image which is it's kind of nice it's probably a little bit too far yeah that's about right that'll do I'll do it now the reveal before also needs to respond to the hover so we can do reveal hover hover yeah hover area before and I'm gonna say transform translate y 8 pixels we're just gonna guess that to begin with okay so that slides it out the bottom I think we could go further 12 yeah let's do that and what we're going to do is we're going to add the transition on transform also to apply to to the four like that yeah there you go it's now sliding up it is a very dark black color that's not what we want so let's change its opacity Saul give it a default opacity of say not 0.4 let's try that yeah that's probably fine and then when it's slid out slide it down it slid open when it's there it can be not put to uses it's obviously not animating the opacity but the values themselves look fine so we can update this transition by putting a comma on the end and then adding in opacity there so now we ease opacity at the same time as we ease there we are look at that SWE's the transform so it feels like it's getting bigger it feels like it's coming out of the screen because the icing the shadow come down and it's getting lighter the reason we're doing the two element thing rather than say animating box-shadow is because we when we do it this way it's better for performance reasons because we're taking an existing element that's already being painted once and we just change its opacity is change its transform the browser can do that in an accelerated way whereas if we animate to box-shadow we have to paint the box shadow on every frame and it's a blur effectively to do a box shadow and that makes it very expensive so you may remember from the start of this we had some text that slid over the top when we did the reveal let's get into some of that then now this is a little bit messier than that first bit but hopefully not too messy and maybe shows a couple of interesting things about working with the web and transforms and all that kind of good stuff so let's get into it a limit on the HTML side I'm gonna do is I'm just gonna add a div I'm gonna call it reveal title I'm using BEM here if you're not coming across bed we should have a check about if it was doing shadow Dom I wouldn't be using them but I'm not so I am yeah it's all good so let me just put in the hello something like I'm gonna do like hello the world it doesn't really matter all that title is so with the reveal title on the styling side what we're gonna do is we're going to say position absolute absolute let's say top:0 left:0 so on and so forth width only % height hundred-percent font size call it 36 pixels color white then we are now on screen we're not actually gonna see anything because similar to before the revealed title is position static where ours sorry is position absolute in fact as as well as the image so we're not going to see this appear on top of that because they're still in source order so I'm going to go add a Z index or Z index on top of this and by just giving it a Z index was that index value it's going to appear on top of the image which is good so it's a similar kind of thing with it the stacking context the ordering that I briefly alluded to before now we wanted to appear in the middle that text so let's say display flex again and a line content Center and always notes light again so easily confuse on this one line items and then justify content center that should do it there we are that's in the middle now we need to do the one which says world and it kind of slides in from the side so let's do that so we'll do the title of will put title overlay for now and I know I'm going to need an inner child element for this so I'm going to call this overlay value what could have caught overlay text overlay text sure world there we are the reveal title overlay is going to be like this and what we're going to do is we're going to say it is say a hundred pixels tall and we are going to say it is also position:absolute so we need left:0 top we're gonna do top I'm gonna do calculations again we're gonna say 50% - 50 pixels again I'm hard coding a lot of these values just to make things easier here but in reality you'd want to do something a little bit more flexible I would expect in production okay so the reveal overlay is mmm that will also need a Zed index on it - okay says world and it's obviously not in the right place yet but we're getting somewhere let's do background and we're going to do that as a dark gray and then we're going to do is similar to this one we're going to take that pop up there and change the color to white and also change the font size so they're very they're fairly similar I think we could possibly get away with doing something similar than just overriding the values if I let's do that let's just collapse that in so let's see which ones are different so both position:absolute that can go top is different that needs to stay left is the same so that can go width and height width is the same height is not so that stays L index is different they're both doing the display that and the color is the same here so that seems good so we can do that for now although we possibly want to change the color of the the other text on the other side the the hello before the world so that's looking okay and then we could actually make this font size maybe a touch bigger as well just a bit of variation I suppose 42 pixels yeah we'll go for that with that for now what I'm gonna do in the reveal overlay cell so this is the gray box in the background I'm actually gonna skew that so I'm gonna do a transform I'm gonna skew it minus 30 degrees okay now that seems like an odd decision but bear with me what I can then do with the channel element the overlay text is I can do a transform of 30 degrees and because it's a linear transformation askew it resets the text the inner part while leaving the skew on the outer part and that's kind of neat so one of the things we need to do is we need to now make this gray block a little bit wider on the screen because as you see it's sort of slightly inside this the element here so let's do that what we're gonna do is we're gonna make that a touch wider here by saying I'm just gonna hard code the value and let me say something like 405 pixels that seems a little bit odd that it's not working but again what we can do is we can apply a transform and there is a reason I'm doing it all like this with transforms it's largely because of the fact that if we don't use transforms here it will start to get a little bit Messier and I know it doesn't look that clean already but trust me it does get even messy if you don't do it like this so whether you're being a bit wider what we actually want to do is we want to do something a little bit different here we want to position it by default in the middle and then account for it with the transform so what we're going to do is we're going to move it into the middle with left 50% okay and then we're going to do minus 150 percent and the reason we do this is so that when it comes back in the middle part where I'm just going to put my cursor here this is smack in the middle and then if we instead of translating to zero now we're going to translate to my x2 minus 50% and that says whatever happens just go to the middle okay so now the great block is certainly going into the middle and you see the world is sliding to the side there and the reason for that is because it isn't going to be doing the right thing it needs to go from let's see a hundred and fifty percent maybe I like how that comes in from the other side but that isn't the effect that we want and we just want it 50 percent so look no do we want it to do anything L maybe 100% honey percent might do it there we are hundred percent ah that's provide you sometimes I even I get confused with my transforms okay so it's kind of looking correct except that we can see all the elements moving well now this is a case of then saying overflow:hidden in a few places the first place that we'd probably want to do this is in the over lay itself because we want it to reveal the text so if we do overflow:hidden then we get this that's one what we don't want to do is we don't necessarily want to add an overflow to the reveal because this would be the one you probably think of doing next because you're thinking well this gray block is the reveal overlay and so its parent is revealed therefore I should put overflow:hidden on the reveal the problem with doing that is that then you'll stop the shadow from appearing so I'm going to sort of it's not cheap but I'm gonna add a reveal container I don't like it but it's the only way to maintain the separation here we want to have something that can be overflow:hidden and so we need to create this other element so I'm gonna just do this contain out and say width under height 100% and then we're going to do the flow you would say position:absolute top:0 left:0 and hopefully now you see we get this nice slide ii reveal which is the effect that we wanted from there you can do parameterization of say the colors you could use CSS variables you could change the typeface and mess around with the image and you might end up with something that looks like this just saying that's everything from me folks i hope you've enjoyed this video give it a thumbs up if you have that helps me a bunch subscribe if you haven't already don't forget you can ring that little notification bell if you want to be notified whenever i put one of these videos live on the interwebs and I will catch you lovely folk well I catch you oh yeah on the flip side [Music] that one felt good all right

Channel: Paul Lewis

Views: 13,712

Rating: 4.9620595 out of 5

Keywords: css, tutorial, how to, guide, web, web development, animation, keyframes, paul lewis, javascript

Id: NahTzBgDkTA

Length: 19min 44sec (1184 seconds)

Published: Tue Oct 16 2018