Анимация в веб-дизайне очень популярна в настоящее время. Использование анимации в дизайне вашего пользовательского интерфейса придает вашему сайту вау-фактор, который волнует ваших пользователей. Это также повышает удобство использования сайта, если все сделано правильно.

Экраны входа и регистрации обычно скучны и одномерны, поэтому у меня появилась мотивация создать учебник о том, как оживить ситуацию с помощью анимации на основе CSS и javascript.

Вот полное видео:

Учебное пособие проведет вас через шаги по созданию красочно яркой веб-страницы регистрации входа. Дизайн страницы показан ниже:

Дизайн можно разбить на макет в виде сетки со ссылкой на элементы 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, чтобы получить желаемый внешний вид. Естественным порядком форм было бы то, что они расположены вертикально, нам нужно присвоить регистрационной форме определенные значения слева, сверху, чтобы регистрационная форма располагалась справа от формы входа. Нам нужно, чтобы он располагался справа, чтобы мы могли анимировать его горизонтальное скольжение слева направо. Мы также применяем некоторое позиционное значение к разделу забытой панели.

Механика анимации будет активирована нажатием на кнопки в разделе «кнопки навигации», при нажатии на которые у нас есть код javascript, который изменяет левые позиционные значения форм. Мы также переключаем значения непрозрачности, чтобы форма в фокусе была видна, а другая форма была невидима с нулевой непрозрачностью. Ниже приведен Javascript, который назначает событие клика и изменяет значения CSS для работы анимации:

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

последняя часть магии, которую нужно применить, — это добавить свойство перехода «transition: все .5s easy;» ко всему, что вы хотите анимировать: в моем случае, чтобы анимировать формы при изменении положения, я просто добавил следующее к элементам формы и забыл-панели:

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

Вывод

Есть много способов сделать анимацию, этот подход больше похож на Javascript, но вы также можете сделать так, чтобы все изменения свойств происходили в CSS, и чтобы javascript переключался между различными классами вместо изменения свойств CSS. Надеюсь, вам понравился урок.

PS. Вы можете увидеть код на github по адресу: https://github.com/ui-code-tv/animated-login-register-form