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

5.2 Animating the Labels

Hello, and welcome back to Practical Web Animation. In this lesson, now that we've got our initial styles in place, we're going to start animating our floating label. So the starting pin for this particular lesson will be found in your course notes. We're picking up right where we left off in the last lesson. So, once we open up that starting pin, let's go ahead and fork it to create our own copy And then let's get started. So initially let's go and pull out our JavaScript here and first we need to jump into our Settings go to our JavaScript tab and do a quick add for jQuery. Once we've got that added will just Save and Close and now we can use jQuery in our JavaScript. So let's Bring these down a little bit so we have a little more room to see our JavaScript. And the first thing I want to do is when I click on one of these input fields I want the placeholder text to disappear. So let's do that in Our Java Script. We're going to point to our input fields and in this particular instance we could just point to input. Now if you get a much larger form that's more than just text fields Then you might need to be more specific than this for example you might do input and then type ='text' something like that. Notice we've got square brackets here to indicate that we're going to point to an attribute of these inputs and then text is inside single quotes. But that's another way that we can do it and then just to test it if you're not sure if your selector here is going to work you can always test it by doing something like this we'll do .CSS, and then if we want to change the CSS for the background color property we would just put that inside quotation marks comma space and then in quotation marks again we'll put the value such as read. So now if we Take a look down below we can see that our background is red. We know that we're targeting the right thing here. So let's get rid of that dot.css and instead of that we're going to do a click event. So we're going to use the jQuery click function, so we're going to do click and we have .click after selector and then inside parentheses we're going to type in the word function. Open and close parentheses for a function and then our opening and closing curly brackets for that function. I'm going to nudge that second or the closing curly bracket down a couple of lines and then remember at the end of your closing parenthesis there to put a semi-colon to end that statement. Then inside this function We can apply our code. Now the first thing I want to do if we want to reference the button that we clicked on because this particular selector, asset button I'm actually talking about the element that we clicked on. But remember this particular selector is pointing to multiple input fields. If we want to know which input field we've clicked on We would point to dollar sign in parentheses the word this the problem is that this statement here can be a little bit in efficient. If you want to make that more efficient, so that you only have to call it once we can create a new variable called just dollar sign this And set it equal to dollar sign parentheses this. So we've just created a new variable here, this way we can point to this particular item as many times as we want to but it will only have to run this particular code once and this particular code is what searches the for For that particular element. And if it has to search dom the every single time and just becomes a little bit inefficient, so doing it this way is a little bit more efficient, and so we're going to stick with that. So we've created our variable and now anytime Time we want to point to this particular button we can point to dollar $this and there we go. So what I'm gonna do is I'm gonna get rid of our placeholder whenever we click on this input field. Some of the points to $this. and then there's a jQuery method called attr for attribute, And in this method we can type in the attribute we want to point to, which in this case is placeholder. Make sure you put that inside quotation marks and then a comma and then inside quotation marks again. We can enter in the new value for our placeholder. Well, the new value for our placeholder when we click on this input field is going to be blank. So we're just going to leave these Quotation marks blank here and we'll put it simply colon at the end of our statement. So let's see if that works will click on first name and sure enough it disappears will click on last name. And it disappears as well now one thing you might have noticed first of all everything has disappeared now so let's save that And just refresh our page. One thing you'll notice is that if we're hovering over the left part of our first name field, we don't get that text cursor icon. If we come over here to the right, we start to see it over here. But the reason for that is remember we have this invisible Input label that is hovering over this text field right now. One thing I wanna try to do to get rid of that so that we can see the cursor to the whole way across Is when we point to our input fields. I want to give these a z index of one and then for our labels, I want to give these a z index of zero. Now we'll see when we have or over those text fields that still doesn't get rid of our problem. So we're going to have to go with option two. So instead of setting the z index What I'm going to do is for our labels instead of just setting opacity to zero. We're also going to set visibility to hidden. Now when we have or over it you can see that we're getting our cursor input as we want so again that Z. index is not going to work for you but if you just set your visibility to hidden for those labels initially then you shouldn't have any issues with your cursor. But when we click on each one of these we can see that this code here is working it's getting rid of our placeholder. So now we just want the label to animate in above our text field. Whenever that does disappear. So one way we can do this is we can create a new class called labels top and just for kicks right now, let's apply a class of label top to our first label here And then we'll come down here and create a rule for the label hyphen top class in our CSS. And what I want to happen here is I want the visibility to be set to visible our opacity set to 1 and then we'll set our top position to negative 20 pixels which as we've discussed before is going to be our final location for those labels. Whenever they animate into place. And it just occurred to me that this should say visibility not visible, so visibility colon visible, and now we see that in place. We see that where we want it to end up. Now that we know where we want it to end up, we can create our animation so what we're going to do Is when we click on our text fields over here in our jQuery, we're also going to add a class to the label that's part of that same input group. Because remember the label itself is not the same thing as our input and the click event here is for the input. So what we need to do is we need to look outside that input Here's our input right here. Let's stretch this out so we can see it for a second. Here's our input right here we need to look outside that input at its parent which is this input group and then inside that parent for the label. That's associated with this and then for that label we're going to add a class of label-top and hopefully that will get us where we need to go. Another thing we want to do is we want to make that into an animation. So for our label element here. We want to add that transition class will add transition all. And let's make this take half a second so point five S. So let's get rid of our label top class over here in our HTML. So now there is no label top class associated with it. We're back to where we started over here and then let's jump into our jQuery and make this happen. So we've got rid of our placeholder attribute and then on the next line we're going to Point to this, which again is the input field. We're gonna look at its parent, which we just use the parent method for, so we type parent(). And then we want to find something inside that parent. So we're gonna use the find method. So we're gonna do. Find and then inside the parenthesis and inside quotation marks we're going to type in a CSS selector for what we're looking for. We're looking for a label. So what this is going to do is it's going to look at the parent. Of this, which is the input field we just clicked in the text field, so the parent of the text field again is this div of the class of input group, and then inside that input group we're simply going to find a label, and then once we find that label we're going to add a class to it Of label-top and then don't forget your semi-colon at the end of that line. So let's see if that works. We're gonna click inside first name and there we go, not only does the first name disappear from the placeholder but it also animates back in above it so that we can still get a good idea of what text is supposed to be in this field. Now if you wanna add one final touch to this animation we could also maybe thicken up this bottom border a little bit make it change colors whenever we click inside that first name text field. And we can do that using the same focus attribute that we used before to get rid of that outline. So when we focus on it, we might thicken that border again. So we'll set Border-bottom and let's do this one thing at a time. Let's do border-bottom-width and we'll change it to 4px and then let's stretch this out a little bit. And then we'll also do border-color and let's set that to a value of #68f. And that will give us a blue shade for our our bottom border there And then for our input here we can just set our transition. So for the border, let's maybe do one second. So we'll do all one S and so now when we focus by clicking on that text field. We'll see that that bottom border animates as well so we can click on the last name text field, we see the label animate up and we see the bottom border animate out And we can finish typing in whatever text we're typing it. So that's how you create a floating label effect using CSS and jQuery as you can see the jQuery we really didn't do any animation using the jQuery, all of our animation was done in CSS. We just use our jQuery to get rid of our placeholder and add a CSS class to one of our items. So thank you for watching and I'll see you in the next lesson.

Back to the top