7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.6 Background Swipe Variations

Hello and welcome back to Practical Web Animation. In this lesson, we're gonna create some variations on a theme. So we've created this button swipe animation. And we're gonna create two very similar animations by making a couple of small modifications. So we're starting where we left off in the last lesson. So the pen that we ended with in that last lesson, I will include the URL for that in our course notes and we'll use that as a starting point for this lesson. So once you open that starting pen up, let's go ahead and click on the fork button to create a new copy of it. And the first thing I'm gonna do is I'm gonna create two copies of our swipe button here. So I'm gonna copy that, skip a couple lines, paste it, and paste it again. So what I'm gonna do with our second and third buttons. With our second one, we're going to have the same background swipe animation, but I want it to animate from the center. So it's gonna start in the center and animate out to the edges. Our third button is gonna do the same thing, but we're also going to skew the shape of it, so it'll give it a nice little diagonal effect. It'll look really cool. So we can apply a lot of these styles that we're gonna be dealing with to both the second and third one, because they're both gonna be animating out from the center. So let's add a second class to our second and third buttons here. We're gonna leave the btnSwipe class there because most of the functionality that we've already created, we're gonna keep that. We're not going to delete anything. We're going to, again, use that as a starting point. So we'll leave the btnSwipe class there, and we're just gonna add a second class for the second one, of centerSwipe. And then for our third one, I'm gonna call it skewSwipe. So again, since both of these are going to animate out from the center, the first change that we're gonna make, we can apply to both of those classes. So let's scroll down. Here's the before pseudo class for our btnSwipe class. And just after that, let's create another rule for the before pseudo classes of both of these new classes that we've created. So we're gonna point to .centerSwipe::before, .skew. If we spell that right, skewSwipe::before. So for both of those pseudo classes, we're actually going to, again, animate out from the center, but the way we're gonna do it is with a little bit of a cheat. What we're gonna do is we're gonna start our white background here. We're gonna start it at the left position of 50%. And so it's gonna start animating from the center and it's gonna animate out to the right. And let's go ahead and make that happen. Inside this new rule that we've created, we're gonna set the left position to a value of 50%. And when we hover over those buttons now, we can see that it animates from that center point. The problem is, it's only animating to the right. We want to animate to the right and to the left. So what we're gonna do is we're also going to animate the position. We're already animating the width, now we're gonna animate the position. And since our btnSwipe class, our first button up here, since that left position is already at zero. We can just apply that left position of zero to this pseudo class here for the btnSwipe class and it should work fine. So just after we set the width to 200 pixels here for the btnSwipe.hover::before rule. We're also gonna set the left position to 0%. And that's not gonna change anything for the first button. The first button will still work exactly like it did before. But our second button which now has the left position set to 50% at the beginning, it will now be set back to 0% when we hover over those items. So if we hover over the second one now, we can see that it animates out in both directions. So we achieve that by animating both the width and the left position property. So our second button is for all intents and purposes done. Now, we just need to apply one more modification to our third button to get it to work like we want it to. And what we're gonna do for this third item with the skewSwipe class applied to it, is we're gonna take that white background and we're going to skew it. Which basically just means we're going to lean it over a little bit. So for this skewSwipe class, let's go ahead and highlight that skewSwipe::before and copy that, and we'll create a new rule with just that particular class in it. And all we're gonna do here is apply a transform to it, so we'll use the transform property, colon. And then I'm going to perform a skewX, and you'll notice the X is capitalized there. And then in parentheses, we can say how much we want to skew it. And I want to skew it 30 degrees. So we type 30deg for degrees, and then a semi-colon after that closing parenthesis. So now when we hover over this third button. We get the same effect except now that white background is skewed. So, as you can see, there's only one last thing that we need to do here and that's to get rid or, basically, hide any portion of that skewed white background that moves outside of the button. And that's a very, very easy task to accomplish. All we need to do is to create a new rule for just the skewSwipe class itself. Which would be the actual button here, this third button and we're just gonna set the overflow property to hidden. Which means that if there's anything inside this button that extends beyond the boundaries of that button, we're just going to hide it. So now when we hover over it, we get the effect that we're going for. And that's a really cool effect, that again, you don't see very often online. You don't see that all over the place. So it just adds some interest to your page. It's very easy to do. And it looks really nice. So those are just a couple more variations that I hope you find useful. And I want to encourage you to experiment with those experiment with different ways that you can animate that new background that you've created over the original background. And I hope you're able to come up with some really creative ideas of your own. So with that done, we'll just save our changes and move on to the next lesson. Thank you for watching.

Back to the top