【前端实践系列之九】登录注册界面千篇一律？教你做个炫酷的！-一一网

这是我参与更文挑战的第10天，活动详情查看：更文挑战 !

? 概论

登录注册界面人人都做过，界面大多千篇一律，枯燥无味。今天，我们就来添加各种动画，做个不一样的。当然，可能现实中并没有机会使用毕竟大家现在大多都是做管理系统，这方面的需求并不高（我也如此）。但并不影响我们把思路学到手嘛。

先说下做动画的指导思想：再复杂的动画，只要学会抽丝剥茧，一层层去实现就会豁然开朗。动画效果实现的方式也有很多，为帮大家打开思路，我会使用不同的方法来实现。

? 总体思路

点击事件触发时切换最外层元素类名，不同类名对应不同的css属性值，同时搭配transition过渡来动画效果。

? 实现过程

? 功能区水平滑动

一提到水平滑动，大家的第一反应应该就是translate了吧。此处我们就选用translateX。

tips:translateX 即 translate(x,0)。
复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <!--功能区-->
      <div class="switchWrapper flexCenter">
        <div class="btn flexCenter">
        </div>
      </div>
    </div>

    <script>
      const main = document.querySelector('.main');
      btn.onclick = () => {
        if (main.className.indexOf('active') != -1) {
          main.className = 'main';
        } else {
          main.className = 'main active';
        }
      };
    </script>
  </body>
</html>
复制代码

body {
  background-color: #ededed;
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  position: relative;
  width: 900px;
  height: 550px;
  margin: auto;
  overflow: hidden;
}

.switchWrapper {
  position: absolute;
  z-index: 99;
  left: 0;
  overflow: hidden;
  width: 32%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: transform 1s ease-in-out;
}
.btn {
  position: absolute;
  width: 90px;
  height: 36px;
  color: #fffffe;
  background-color: #ff8906;
  font-size: 15px;
  border-radius: 30px;
  cursor: pointer;
  flex-wrap: wrap;
  overflow: hidden;
}

.active .switchWrapper {
  transform: translateX(calc(900px - 100%));
}
复制代码

?按钮文字垂直滚动

不知大家是否还记得margin有个特点，当其取值为负时，会破坏文档流向反方向移动。利用这一点可以实现水平、垂直方向上的滚动效果。

···
    <div class="main">
      <div class="switchWrapper flexCenter">
        <div class="btn flexCenter">
          <div class="text flexCenter">去登录</div>
          <div class="text flexCenter">去注册</div>
        </div>
      </div>
    </div>
···
复制代码

···
.text {
  width: 100%;
  height: 100%;
  transition: all 1s ease-in-out;
}

.active .text:first-child {
  margin-top: -100%;
}
···
复制代码

?背景跟随滚动

背景跟随滚动效果在实现时，我们先利用伪元素添加背景图片，然后动态调整背景图片的位置即可。

···
.switchWrapper::after {
  content: '';
  display: block;
  background-image: url('morning.jpg');
  background-size: 900px 550px;
  background-position: top left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 1s ease-in-out;
}
···

.active .switchWrapper::after {
  background-position: top right;
}
···
复制代码

?表单区域滚动、内容切换

这部分的水平切换我们继续选用translateX，内容切换通过JS实现。值得注意的是切换的时机要把控好。

···
  <body>
    <div class="main">
      <!-- 切换功能区 -->
      <div class="switchWrapper flexCenter">
        <div class="btn flexCenter">
          <div class="text flexCenter">去登录</div>
          <div class="text flexCenter">去注册</div>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="outerBox">
        <div class="container flexCenter">
          <div class="signInBox">注册内容区</div>
        </div>
      </div>
    </div>

    <script>
      const main = document.querySelector('.main');
      const btn = document.querySelector('.btn');
      const signInBox = document.querySelector('.signInBox');
      btn.onclick = () => {
        if (main.className.indexOf('active') != -1) {
          main.className = 'main';
          setTimeout(() => {
            signInBox.innerText = '注册内容区';
          }, 500);
        } else {
          main.className = 'main active';
          setTimeout(() => {
            signInBox.innerText = '登录内容区';
          }, 500);
        }
      };
    </script>
  </body>
···
复制代码

···
.outerBox {
  position: absolute;
  z-index: 9;
  left: 32%;
  overflow: hidden;
  width: 68%;
  height: 100%;
  transition: all 1s ease-in-out;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #fffffe;
}
.active .outerBox {
  transform: translateX(calc(-900px + 100%));
}
···
复制代码