2.6 Animated Spotlight Effect
In this project, learn how to use CSS3 to create an animated spotlight sweeping left and right across a stage.
1.Introduction2 lessons, 05:01
2.The Projects10 lessons, 2:27:30
3.Conclusion1 lesson, 01:18
2.6 Animated Spotlight Effect
Hi, and welcome back to 10 CSS 3, branding and presentation projects. In this project, we're gonna be creating an animated spotlight. Now, to get started, fork the base pen that you'll find in your related links below this video. The first thing that we need to do is add a div to the class wrapper. And we're gonna add in some code that's gonna keep a pretty tight control on the high end width of this wrapper. We're gonna have some elements in this spotlight that need to be perfectly positioned relative to one another, so we're going to make sure that the wrapper that our spotlight works within, is based on 100% of the height of the viewpoint. And then 150% of the height of the viewpoint, so that's going to help us make sure that everything is exactly where it needs to be in our layout. Now let's add a backdrop. We'll style that with the css. Now we're setting the position of this backdrop to absolute because we want to make sure it covers the entirety of the wrapper div that we just set up. So we have a line to the top and left corner. And then we have the width set to 100% and the height set to 100%. And now we're using a linear gradient for the background. So, we're just starting at a black up the top and then we're smoothly transitioning down to a deep blue at the bottom. Now we're gonna create a stage floor for our spotlight to come down and shine on to. So we've added a div with the class stage floor and we're gonna start out just making that a great big white square. This is positioned absolutely, it's made to stretch out to the left and right edges. And we have it at 150% height. And the reason is, what we're going to try to create is a stage floor that looks like the light of the spotlight is brighter in the middle and gradually falling off. To do that that we're gonna project a round gradient onto this square, then we're gonna squash that square away down, so that our elliptical gradient will take the shape that a lot would take when it was hitting the top of a stage floor. We'll add in our gradient now to replace this white background color. And now, if you have a look, you can see that it's lighter in the center, and this is our center here cuz it's 150% higher right now. So this is the brightest color and then it gradually fades out to transparency. Now if we squash that down so that that maintains the width that it has right now but, it's only a fraction of its original height. And now you can see that this is starting to look like a stage. We have a crisp edge up here. You've got the lighter area in the center. And then the light gradually falls off. And right now, we still have a gap under here. So we'll fix that by changing the top position to 10%. Now we have a stage floor, with the light already falling off to give us the right effect for when we add in our spotlight. Now that takes care of a subtle effect of brightness in the middle falling off to darkness at the outside. But we also need to have the main highlight that the spotlight puts on the stage, a brighter light. So for that we'll add another div with the class stage highlight and we're gonna style that with another elliptical gradient. And when I say elliptical gradient, I mean a radial gradient with the shape of an ellipse. And now you can see that we have a proper highlight effect as you would expect to see from a spotlight hitting a stage. Now, this time instead of squashing the whole box that we have the gradient inside of, we've used these positioning percentages here. This first percentage here represents where the gradient should sit on the horizontal. So by setting it to 50% we've said this gradient should rest halfway along the the screen horizontally, but by setting this second number to 82% we've said that this gradient should be almost all the way towards the bottom of the screen on the vertical. If we change that number to 75 you see how the gradient moves there. So by setting this second value, we're able to control how much that gradient is squashed down so that it looks like the right shape for a spotlight to be casting onto this stage. We're also using absolute positioning and later on we're going to modify these values with out animation so that we can make our highlight move across the screen. In time with the spotlight. Now it's time to add in the spotlight itself. Add in this HTML. Now this div with class spotlight is where we're gonna be creating the spotlight effect but we have that also nested Inside this diff with the class spotlight swivel. And later on we're going to use the spotlight swivel class to change the direction that the spotlight is pointing so that we can make it go from left to right on the stage. Now let's start building out our spotlight. We're gonna do this piece by piece, step-by-step so you can see how this process works. Now we've started with a pseudo element applied to our spotlight class. And in that studio element we've created a great big circle. This background color is just white temporarily so that you can see what's going on with this process. We've set both the width and the height to be 100% of the view port height. And we've given it a border radius of 100%. Now, we're gonna use the clip property to trim our circle down, so all that we can see is a single quarter, just a quarter circle. And now we're only showing this quarter circle. And the way that this works is, we've said that we want to clip this element with a rectangle shape. So what we've actually done is drawn a rectangle over the top of our element, and said that only whatever is behind this rectangle should be visible. And then, with these four numbers here, we specify where the rectangle should be drawn. And then this quarter circle that we're left with gives us something that starts to look a little bit more like a spotlight. And we can continue working with this and shaping it into the spotlight shape that we want to do that we are going to start by rotating it by 45 degrees. Now this is starting to look a little bit more recognizable as a spotlight shape. And the next thing we are going to do is pick the height up. We know that our quarter circle is 100 vh in height. And we also know that we're only showing a half of that pie right now. So we're gonna set the top value to -50vh. So 50vh is half of the overall height of our element. And by setting our top property to -50vh, we're hiding that invisible portion of our element. Now, all you really need to do is squash down the width of our quarter circle, and stretch out the highs. And we're gonna do that by applying some code to our spotlight element. So, our quarter circle's on the after pseudo-element. And we're gonna apply these changes on the actual spotlight class itself. And so we now we've got something that definitely looks like this could be the shape coming from a lamp that's up above and shining down onto the stage. And we've used transform scale, we've set the width of our spotlight to 1.5 and the height to 3. So now our quarter circle is twice as high as it is wide. And with this scaling transform we've also just blown up the overall size a little bit. Now we've also changed that top position. We've dragged it up a little bit more so that rather than seeing just a pointy end. At the top of the shape, we're seeing a shape that suggests that there is a light source above the screen. And then we're centering our spotlight positions by using calc. So 50% would be the exact halfway point of the screen. However if we were to position our spotlight at 50% you can see that it goes way off the side here because we need to adjust that position for the width of the spotlight. Now our original spotlight width is 100vh. However, we've scaled this up. Our current width is 1.5 times that original width. So right now, the overall width is 150vh. We divide that by two and it gives us 75vh. So by subtracting that 75vh, we bring our spotlight element over by half of its overall width, and that's how we accurately center it on the screen. Now that we have the right shape and position for our spotlight, let's get rid of this straight white background, and replace it with a radial gradient. And there we go. Now we've got a really nice, subtle spotlight lighting effect. And you can see that we've got the edges of the shaft matching up with where our highlight falls, and we've got it brighter in the center with the light gradually fading off until it reaches these edges. So as it is that already has a really nice spotlight look, however a spotlight will also tend to have a much brighter core in the center coming from where the lamp is that gives off the spotlight. And we're gonna add in another div to simulate this lamp brighter area, but be aware that this technique doesn't work in Firefox. It does work in Chrome and Safari, though. So we'll add a div for the class lamp above the spotlight div, and then we'll add in the CSS. And you can see that we have what already looks like a beam effect coming down the center. Now what we've done here is we've created a div with a width of only 40vh and a height of 400vh. So it's ten times higher than it is wide. And then inside that div, we've used another radial gradient just like the ones that we've been using so far. So we've got a brighter color in the center moving out to a transparency on the edges. Now what we're gonna do is apply a transform to it that's gonna make it look like it's following similar lines to the spotlight, so that it looks like it's properly part of that light beam. So, there you go. So, that has just spread out, that gradient that we just added in cuz what we've done is set perspective and rotation. So, what we've done is if you can imagine that you hold a plate in your hands facing directly to you, and then you tip it forward that's exactly what we've done to our original light beam shape. But just to make that a bit more visible so you can see more clearly what we've done, we'll just temporarily hide the spotlight. Yeah, so now you can see how we have these diagonal lines because the bottom of that gradient has been spread out wide. Leaving this beam type of effect in the center. Now if you preferred this effect, you could use this just by itself to create a spotlight look. But the problem is that it doesn't work in Firefox. So by having both of these, you have the best of both worlds. You've got that lamp beam in the center, you've got the crisper edges from the spotlight, and you're gonna see a spotlight effect in any of those browsers. And now, just to make that lamp and spotlight effect blend in with each other a little bit better, we're gonna turn down the opacity on the spotlight. So we're gonna turn that down to 0.5. Now I've just softened off those edges there. Now we have all the elements of our spotlight in place. We're ready to start animating it from left to right. Now first we're gonna animate the highlight at the bottom here. We're gonna make that move from left to right. So we're gonna define an animation using @ frames. And the animation is gonna be called move_highlight. So at 0% of the life of our animation, we are not gonna have any movement at all, so zero movement on translateX. And at 25%, we wanna move our highlight over to the right by 25vh. Halfway through the animation, we're back to the center again. Back to 0. And then three-quarters of the way through the animation, we're at -25vh. So now we'll deploy that animation on our stage_highlight class. So here we go. We'll set animation to move_highlight. We're having it run over a period of 5s. We're using a linear animation timing function. So there's no change in the speed. it's not speeding up or slowing down at any time. And we're looping it infinitely. So now we've got our spotlight highlight that's hitting the ground, just gradually sweeping from left to right. And now, what we need to do is marry up the movement of our spotlight light beam with our stage highlight. We'll do that by creating a second animation, this time called rotate spotlight. Now with this rotate spotlight animation, we are having the rotation run from 0deg at the beginning, which just has a dead center, out to -15deg to point one direction, back to center. And then to 15deg to point out in the other direction. Now we're also having to scale up the y value. So that's scaling up the height to 1.1. And that's because as the light has to go out to the edge of the stage there's further between the light source and where it hits, than there is when it's just shining straight down in the center. All right now let's apply that animation to our spotlight swivel. Now there we go. Now everything is lined up perfectly. And there is your animated spotlight effect. Now as always, we would love to see your completed pen. So when you finish building your animated spotlight, please tweet it through to us at #10CSS3projects. In the next project you're gonna be creating some motion typography. This is something that you might have seen before but typically motion typography is created with video editing software. But you can do it too with CSS3. I'll see you in the next project.