登录滑块验证表单_如何构建双滑块登录和注册表单

登录滑块验证表单

Some of you might already know but for those who don’t, I’m starting a Weekly Coding Challenge with all of you! ?

你们中有些人可能已经知道了，但是对于那些不知道的人，我正在与大家一起发起每周编码挑战！ ？

This challenge is meant to help improve our coding skills by practicing on real-life projects.

这项挑战旨在通过在实际项目中进行练习来帮助提高我们的编码技能。

You can read more about this challenge and how you can join it by reading The Complete Guide.

您可以阅读《完整指南》 ，以了解有关此挑战以及如何加入挑战的更多信息。

Alright… so the challenge for this week was: Create a Sign in or Sign up form (or both).

好吧……所以本周的挑战是： 创建一个“登录”或“注册”表单(或同时创建两者)。

Below you can see a demo of what I’ve created:

在下面，您可以查看我创建的演示：

Truth to be told, I’ve struggled a bit with creating the animation ?, but in the end, I managed to make it work. ? I was inspired by this shot on Dribbble by SELECTO — they have some awesome designs, you should check them out!

说实话，我在制作动画方面有些挣扎，但是最后，我设法使它起作用。 ？ 我从ibbble博士和SE LECTO的这张照片中得到的启发-他们有一些很棒的设计，您应该检查一下！

项目介绍 (Project description)

Before we move to the actual code, I’d like to break down the things we’re going to have in the component. This will help as it will make the code we write much clearer.

在转到实际代码之前，我想对组件中要包含的内容进行分解。 这将有所帮助，因为它将使我们编写的代码更加清晰。

We have 4 smaller screens/boxes inside the main component (the .container):

我们在主要组件( .container )内部有4个较小的屏幕/框：

1. The Sign In form

   登录表单

2. The Sign Up form

   注册表格

3. The Sign In overlay

   登录覆盖

4. The Sign Up overlay

   注册覆盖

Also, at one moment in time you can see either:

此外，您会在某一时刻看到以下任一情况：

• The Sign In form alongside the Sign Up overlay

  签到表格和签到叠加层

• The Sign Up form alongside the Sign In overlay

  签到表格以及签到覆盖层

In the overlay panels, we have some text and a button. By clicking it you will bring up the other combination of screens and vice-versa. Check the GIF above one more time to see what I mean.

在覆盖面板中，我们有一些文本和一个button 。 通过单击它，将显示其他屏幕组合，反之亦然。 再检查一次以上的GIF，看看我的意思。

叠加动画-说明 (The overlay animation — explained)

This is where it might be a little trickier, but I’ll do my best to explain so you can understand the logic behind it.

这可能有点棘手，但是我会尽力解释，以便您了解其背后的逻辑。

We have the following layers for the overlay component:

对于叠加层组件，我们具有以下几层 ：

The overlay-container — this will display the visible area (more on this below) at a certain moment in time. It has a width of 50% of the total container's width.

overlay-container-这将在特定时间显示可见区域(下面有更多信息)。 它的width是容器总width的50% 。

The overlay — this div has a double width size (200%) so it's taking the full width of the main container. (200% * 50%= 100%. The 50% is from the .overlay-container above).

叠加层 -此div的width是其两倍大小( 200% )，因此它占用了主容器的整个宽度。 ( 200% * 50%= 100% 。50％来自上面的.overlay-container )。

The overlay-panels — are the divs which are holding the actual content (the text and the button) we see on the screen. They both have a position of absolute. We can position them wherever we want in the .overlay component. One of the panels is positioned to the left and the other one is positioned to the right. Both having a width of 50% of the .overlay component.

覆盖面板 s是保存我们在屏幕上看到的实际内容(文本和按钮)的div。 他们俩都有absolute