HTML, CSS 및 javascript를 사용하여 애니메이션 로그인 등록 웹 페이지를 만드는 방법

웹 디자인의 애니메이션은 요즘 매우 인기가 있습니다. UI 디자인에 애니메이션을 사용하면 사이트에 사용자를 흥분시키는 놀라운 요소를 제공할 수 있습니다. 또한 올바르게 수행하면 사이트의 유용성이 향상됩니다.

로그인 및 등록 화면은 일반적으로 지루하고 1차원적이어서 CSS 및 자바스크립트 기반 애니메이션을 사용하여 항목을 멋지게 만드는 방법에 대한 자습서를 만들려는 동기를 부여했습니다.

전체 동영상은 다음과 같습니다.


이 자습서는 다채롭고 활기찬 로그인 등록 웹 페이지를 만드는 단계를 안내합니다. 페이지 디자인은 다음과 같습니다.



디자인은 아래와 같이 해당 레이아웃을 달성하는 데 필요한 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-buttons"섹션 아래의 버튼을 클릭하면 활성화됩니다. 이 버튼을 클릭하면 양식의 왼쪽 위치 값을 변경하는 자바스크립트 코드가 표시됩니다. 불투명도 값도 토글하므로 포커스가 있는 폼은 보이고 불투명도가 0인 다른 폼은 보이지 않습니다.아래는 클릭 이벤트를 할당하고 애니메이션이 작동하도록 css 값을 변경하는 javscript입니다.

<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;
}

결론

애니메이션을 수행하는 방법에는 여러 가지가 있습니다. 여기에서 취한 접근 방식은 더 자바스크립트 중심적이지만 CSS에서 모든 속성 변경이 발생하고 자바스크립트를 통해 CSS 속성을 변경하는 것과는 반대로 다른 클래스 간에 자바스크립트 토글을 가질 수 있습니다. 자바스크립트를 사용하면 애니메이션의 타이밍, 순서 및 흐름을 더 잘 제어할 수 있다는 장점이 있습니다. 튜토리얼이 즐거우셨기를 바랍니다. 추신. You can get the full code here on github