折り畳み式のログインフォームを見たことがありますか?

26670 ワード
uiweekly ux css webdev テキストリンク

デモ

This is not responsive so I suggest you to view Demo in full new window. Click on the top right most button to view in full window.



ビデオチュートリアル

If you find this tutorial helpful please subscribe to my youtube channel. Thanks



コードしましょう
これをコード化するには、HTML、CSS、およびJS(アニメーションを作成する)を使用します.最初にファイル名を作るindex.html , style.css , app.js また、HTMLの基本的な構造を書くindex.html .
あなたがこれで行われるとき.内部<body> タグを作る<div> 授業で.form-container これは両方のフォームの親です.その中で<div> 別にする<div> 授業で.bg-container そして、これは私たちのフォームの偽の背景として使用する3スパンが含まれます.今のところ.bg-container メイクする<span> そしてそれを与えるクラス.bg プラスそれを与える.top クラスも.今このスパンの2つのより多くのコピーを作るが.top クラストゥ.middle and .bottom それぞれ.
これは次のようになります
<div class="form-container">
     <div class="bg-container">
          <span class="bg top"></span>
          <span class="bg middle"></span>
          <span class="bg bottom"></span>
     </div>
</div>
今すぐスタイルこれ.このCSSを追加します.
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: none;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(bg.jpg);
    background-size: cover;
    perspective: 1000px;
}

.form-container{
    width: 320px;
    height: 500px;
    position: relative;
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-container{
    width: 100%;
    height: 100%;
    position: absolute;
    perspective: 1000px;
    transition: 1s;
    top: 0;
}

.bg{
    position: absolute;
    left: 0;
    background: #fff;
    width: 100%;
    height: calc(100% / 3);
    transition: 1s;
}

.bg.top{
    top: 0;
    transform-origin: bottom;
}

.bg.middle{
    top: calc(100% / 3);
}

.bg.bottom{
    bottom: 0;
    transform-origin: top;
}
このCSSは非常に簡単に理解できるように私たちは私たちは体に背景画像を設定し、中央にフレックスボックスを使用してフォームを揃えることです.そして、我々はまた、スパンをスタイルし、それらに異なるトップ、ボトム値を与えた.彼らは我々のフォームの背景のように見える.
フォームを作成する.内部.form-container エレメントメイク<form> クラスを.form (まさしくそのユニークなクラス名).今の形の中でh1 要素と与えられたクラス.form-title と入力するlogin form それから、ラベルと我々の電子メールとパスワードの入力を加えてください.その後<a> (アンカータグ)クラス.btn と<p> クラス付きタグ.link . そして、この構造をコピーして登録フォームを作成します.若干の変更とあなたの構造は、このように見えなければなりません.
 <form class="form active" id="login-form">
       <h1 class="form-title">login</h1>
       <label for="email">e-mail</label>
       <input type="email" id="email" autocomplete="off">
       <label for="pass">password</label>
       <input type="password" id="pass">

       <a href="#" type="submit" class="btn">log in</a>

       <p href="#" class="link">new here ? sign up now</p>

</form>

<form class="form" id="register-form">
      <h1 class="form-title">sign up</h1>
      <label for="name">name</label>
      <input type="text" id="name" autocomplete="off">
      <label for="email">e-mail</label>
      <input type="email" id="email" autocomplete="off">
      <label for="pass">password</label>
      <input type="password" id="pass">

      <a href="#" type="submit" class="btn">sign up</a>

      <p href="#" class="link">already have an account ?</p>

</form>
これもスタイルです.
.form{
    width: 90%;
    height: 100%;
    position: absolute;
    padding: 40px 20px;
    font-family: roboto, sans-serif;
    transition: 1s;
    opacity: 0;
    pointer-events: none;
}

.form.active{
    opacity: 1;
    pointer-events: all;
}

.form-title{
    font-size: 40px;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 400;
}

label{
    display: block;
    text-transform: capitalize;
}

input{
    border: none;
    width: 100%;
    margin-bottom: 30px;
    height: 30px;
    background: none;
    border-bottom: 1px solid #000;
}

.btn{
    text-decoration: none;
    color: #fff;
    background: #000;
    text-align: center;
    width: 100px;
    display: block;
    margin: 20px auto;
    padding: 10px 0;
    text-transform: capitalize;
    border-radius: 50px;
}

.link{
    color: #000;
    text-transform: capitalize;
    display: block;
    margin: auto;
    width: fit-content;
    text-decoration: underline;
    cursor: pointer;
}

#register-form{
    padding: 30px 20px;
}

#register-form .form-title{
    margin-bottom: 30px;
}
現在、我々は我々のスタイルによってされます、そして、我々はそれほど基本的なスタイルを与えませんでした.しかし、その効果を作成する時間です.オープンapp.jsこれを書きます.
const topSpan = document.querySelector('.bg.top');
const bottomSpan = document.querySelector('.bg.bottom');
const bgContainer = document.querySelector('.bg-container');

// select forms
const loginForm = document.querySelector('#login-form');
const registerForm = document.querySelector('#register-form');

// select links
const registerUrl = document.querySelector('#login-form .link');
const loginUrl = document.querySelector('#register-form .link');

let rotateVal = 1;

const toggleFormAnim = () => {
    topSpan.style.transform = `rotateX(-180deg)`;
    setTimeout(() => {
        bottomSpan.style.transform = `rotateX(180deg)`;
        setTimeout(() => {
            bgContainer.style.transform = `rotateY(${rotateVal * 180}deg)`;
            setTimeout(() => {
                bottomSpan.style.transform = `rotateX(0)`;
                setTimeout(() => {
                    topSpan.style.transform = `rotateX(0)`;
                    rotateVal++;
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}

registerUrl.addEventListener('click', () => {
    loginForm.classList.remove('active');
    setTimeout(() => {
        toggleFormAnim();
        setTimeout(() => {
            registerForm.classList.add('active');
        }, 5000);
    }, 500);
})

loginUrl.addEventListener('click', () => {
    registerForm.classList.remove('active');
    setTimeout(() => {
        toggleFormAnim();
        setTimeout(() => {
            loginForm.classList.add('active');
        }, 5000);
    }, 500);
})
JSで何をしたかを理解しましょう.最初に我々は2つのスパンtopSpan 二番目bottomSpan . その後、我々は2つのフォームを最初に選択しますloginForm 二番目registerForm その後、2つのリンクを最初に選びますregisterUrl 二番目loginUrl .それから変数と呼ばれる変数を作成しますrotateVal この変数は、フォームの回転を追跡するのに非常に重要です.
それから、我々は機能を宣言しましたtoggleFormAnim どちらが私たちのセットアップですtopSpan ロータリー-180deg あと1 S設定bottomSpan ロータリー180deg そして他のコマンドを実行するのを待つ.その後、我々は削除されているリンクをクリックしてイベントを追加しました.active 不要なフォームからクラスを追加.active 欲求へのクラス.プラス私達も呼ぶtoggleFormAnim 関数.
それで、私はあなたが各々とすべてを理解することを望みます.何か間違いをしたり、何も理解できない場合はコメントをお願いします.
訪れてくれてありがとう
スコア
ReactNativeイニシエータ3(構成部品)