でログインしてログインページを作成する方法

今日はウェブデザインのアニメが大人気です.あなたのUIデザインでアニメーションを使用すると、あなたのサイトをあなたのユーザーを興奮させるWOW要因を与えます.また、正しい場合はサイトのユーザビリティを向上させます.
ログインと登録画面は、通常、私は、CSSとJavaScriptベースのアニメーションを使用してスパイスのものをどのようにする方法についてのチュートリアルを作成するためのモチベーションを与えたように鈍い1次元です.
閉じるこの動画はお気に入りから削除されています
チュートリアルでは、色鮮やかなログイン登録Webページを作成する手順を介して表示されます.ページのデザインは次のとおりです.

レイアウトは、次のようにレイアウトを達成するために必要なHTML要素を参照して、グリッドのようなレイアウトに分割できます.

以上のように、次のようにHTMLのスケルトンレイアウトをコード化できます.

<div class="container">
        <div class="login-register-wrapper">
            <div class="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div class="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
    </div>

それから、我々は空白に記入して、望ましいルックアンドフィールを得るために、いくつかのCSS魔法を振りかけます.フォームの自然な順序は垂直に積み重ねられているということです.登録フォームが特定の左側の値を与え、登録フォームがログインフォームの右側にあるようにする必要があります.我々は右側に水平方向に左から右にスライドさせるアニメーションできるように我々はそれが必要です.また、忘れられたパネルのセクションにいくつかの位置の値を適用します.
アニメーションの仕組みは、“NAVボタン”セクションの下のボタンをクリックして起動されます「これをクリックすると、フォームの左の位置の値を変更するJavaScriptコードがあります.フォーカスのフォームが見えるように不透明度をトグルし、もう一方のフォームは不透明度ゼロで表示されません.

<script>
        // Grab dom elements from html layout 
        var loginForm=document.getElementById("loginform-wrapper");
        var registerForm=document.getElementById("registerform");
        var loginBtn=document.getElementById("loginBtn");
        var registerBtn=document.getElementById("registerBtn");
        var forgot= document.getElementById("forgot-panel");

        //Registration button is clicked
        registerBtn.onclick=function() { 
            //Change css properties
            loginForm.style.left="-430px";
            loginForm.style.opacity="0";
            forgot.style.left = "-430px";
            forgot.style.opacity = '0';
            registerForm.style.left= "0px";
            registerForm.style.opacity="1";
            loginBtn.classList.remove("active");
            registerBtn.classList.add("active");               
            }
         //login button is clicked
        loginBtn.onclick=function() {
            //Change css propertie
            loginForm.style.left="0px";
            loginForm.style.opacity="1";
            forgot.style.left = "0px";
            forgot.style.opacity = '1';
            registerForm.style.left = "430px";
            registerForm.style.opacity = "0";
            loginBtn.classList.add("active");
            registerBtn.classList.remove("active");    

        }

    </script>

適用する魔法の最終的な部分は、遷移プロパティ「遷移:追加されます.」あなたがアニメーションしたいことは何でも、私の場合、位置変更時にフォームをアニメーション化するために、私は次のようにフォームと忘れられたパネル要素を追加しました.

form, #forgot-panel { 
       transition: all .5s ease;
}

結論

アニメーションを行うには多くの方法がありますが、ここで撮ったアプローチはJavaScriptの中心的なものですが、CSSですべてのプロパティ変更が起こり、JavaScriptを使ってCSSプロパティを変更するのとは対照的に、異なるクラス間でJavaScriptを切り替えることができます.JavaScriptを使用する利点は、アニメーションのタイミング、シーケンス、およびフローをより制御することです.だからあなたがチュートリアルを楽しんだ.ポーランド航空