접이식 로그인 양식을 본 적이 있습니까?

26737 단어 uiweeklyuxcsswebdev

데모





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의 기본 구조를 작성하고 css, js 파일도 index.html 에 추가합니다.

이 작업이 끝나면. 내부<body> 태그는 클래스<div>가 있는 .form-container를 만들면 두 양식의 부모가 됩니다. 이제 그 안에<div> 클래스<div>가 있는 또 다른.bg-container을 만들고 여기에는 Forms의 가짜 배경으로 사용하는 3개의 범위가 포함됩니다. 이제 .bg-container 내부에서 <span>를 만들고 클래스.bg를 부여하고 .top 클래스도 제공합니다. 이제 이 범위의 복사본을 두 개 더 만들되 .top 클래스를 각각 .middle 및 .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는 우리가 한 작업이 배경 이미지를 body로 설정하고 플렉스 박스를 사용하여 가운데에 양식을 정렬했기 때문에 매우 이해하기 쉽습니다. 또한 span 스타일을 지정하고 서로 다른 상단, 하단 값을 지정했습니다. 그들이 우리 양식의 배경처럼 보이도록.

이제 양식을 만듭니다. 내부.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에서 무엇을 했는지 이해합시다. 먼저 두 범위를 하나topSpan와 두 번째 범위bottomSpan를 선택합니다. 그 후 우리는 첫 번째loginForm 및 두 번째registerForm 형식을 선택한 다음 두 번째 링크registerUrl와 두 번째loginUrl를 선택합니다. 그런 다음 rotateVal라는 변수를 만듭니다. 이 변수는 추적하는 데 매우 중요합니다. 우리의 형태 회전의.
그런 다음 toggleFormAnim rotateX를 topSpan로 설정하고 1초 후에 -180deg rotateX를 bottomSpan로 설정하는 함수180deg를 선언한 다음 다른 명령을 실행하기 위해 잠시 기다립니다. 그 후 우리는 원하지 않는 폼에서 .active 클래스를 제거하고 원하는 폼에서 .active 클래스를 추가하는 링크에 클릭 이벤트를 추가했습니다. 또한 toggleFormAnim 함수를 호출합니다.

그러니 하나하나 이해해주시길 바랍니다. 제가 실수를 했거나 이해가 안되는 부분이 있으면 댓글로 질문해주세요.

방문해 주셔서 감사합니다 :)
디자인 모드향 원 디자인 모드 (flyweight)
튤립 반집성 역방향과 외장(66)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage