????The HTMLNow that we have broken down the core “functionality” of the animation, it’s time to see the actual HTML code.
Let’s start with the basic skeleton:The main div has a class of .
container and also an id of container because we want to target this element in the JavaScript (more on this below).
????The Sign Up formThe Sign In formWe also have a few classes on each div:The .
form-container class will contain the CSS which is duplicated for both the .
sign-in-container and .
sign-up-container classes;the 2 different classes (mentioned above) will contain the CSS which is different.
This way we avoid having to write the same CSS code twice and we use the power of being able to add multiple classes.
You might have also noticed that the i tags have some classes.
These are because we are using FontAwesome for the icons.
Read more about them on their website.
The overlay containerSame as above, we have a common class .
overlay-panel and two different classes: .
overlay-left and .
overlay-right.
Also, we have ids for the buttons as we're going to add an onClick eventListener for both of them in the JavaScript.
The JavaScriptUsually, we cover the CSS before the JS part, but this time it is easier to show and explain the JavaScript code first.
It will help you understand the CSS we’re going to have later on.
As explained above, we add the event listeners.
When the buttons are clicked we add or remove the .
right-panel-active class (not the best name for the class, but it’s the best I got at the moment ????).
This class will be used to style the subcomponents differently as we have two screens.
The CSSFirst, we have the base CSS for the basic components:Few things to note here:We are styling the elements directly (h1, p, a).
Usually, you wouldn’t do that as it might get mixed up with other styles, so it’s good to add a class to each of them.
But for this example it’s working ok because we only have these elements on the page.
We have a little transition on the button.
When it's clicked, the active state is triggered so we make it a little smaller.
Nice and simple clicking effect ????!The form is a flex container as we want to center everything within it, and it's easy to do that with flexbox.
You'll see below that it's used a few more times.
The .
container CSS:Relative positioned because we'll have absolute positioned children elements (explained why, above).
Overflow is set to hidden because we have set a border-radius and we don't want the child elements to break this radius and be displayed outside of the .
container.
Now for the fun part, the .
form-container and related styles:Note the following:The animation (show) which is responsible for changing the z-index of the .
form-containers as discussed above.
We go by having the z-index 1 from 0-49.
99% and having it at 5 from 50-100%.
These ranges are used because we want them to change fast.
We use the .
right-panel-active class to move around the .
form-containers when the buttons are clicked.
And finally, the .
overlay-container and related styles:the .
overlay has a gradient background, I used UI Gradients to get it;.
overlay-left and .
container.
right-panel-active .
overlay-right have a -20% and 20% translation on the X-axis.
This is because I wanted to add a little effect to the text when it's displayed as if it's coming from outside (sort of) ????;Other than that… Nothing!.We covered everything.
We’re done!.????ConclusionThis post was a little tough on animations, wasn’t it?.????.Nevertheless, I hope you’ve learned something from it.
Don’t forget that you can participate too in the Weekly Coding Challenge by creating your own version of the Sign in/up Form.
Share it with me on Twitter: @florinpop1705 so I can see it!Also, you can suggest what we should build for the next Challenge in this Google Form.
You can find the live version of the project we’ve built on Codepen.
Thank you for spending your time reading this ????, I hope that you learned something new!Originally published at www.
florin-pop.
com.
.. More details