시각적 오류 신호를 위해 로그인 팝오버에 \'흔들기\' 효과 추가

때때로 미묘한 디자인 요소가 사용자 경험에 큰 변화를 가져올 수 있습니다. 전통적인 오류 메시지를 표시하는 대신 로그인 팝오버의 "흔들기" 효과는 문제가 발생했음을 명확하고 즉각적으로 표시합니다. 이 튜토리얼에서는 바닐라 JavaScript, CSS 애니메이션 및 오픈 소스 라이브러리 Tipy.js

를 사용하여 이 기능을 구현하는 방법을 안내합니다.

우리의 목표는 다음과 같습니다.

1. Tipy.js로 로그인 팝오버를 만듭니다.
2. 오류 발생 시 '흔들림' 효과를 추가합니다.
3. 흔들기가 끝나면 자동으로 애니메이션을 재설정합니다.

들어가자!

---

1부: CSS로 흔들리는 애니메이션 설정하기

흔들기 효과를 위해 재사용 가능한 CSS 애니메이션을 정의하는 것부터 시작하겠습니다. 아래의 @keyframes 규칙은 좌우 흔들림을 모방합니다.

@keyframes shaking {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake {
    animation: shaking 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

• 키프레임 세부정보 : Translate3d 속성은 팝오버를 왼쪽과 오른쪽으로 약간 이동하여 흔들리는 효과를 만듭니다.
• 재사용 가능한 클래스 : 흔들기 클래스를 요소에 적용하면 애니메이션이 트리거됩니다.

---

2부: Tippy.js를 사용하여 로그인 팝오버 만들기

Tipy.js를 사용하여 클릭 가능한 로그인 팝오버를 만들어 보겠습니다. 팝오버에는 다음이 포함됩니다.

• 이메일 입력란
• "로그인" 버튼.
• 로그인 로직과 흔들림 효과를 처리하는 이벤트 리스너

팝오버 설정을 위한 핵심 JavaScript는 다음과 같습니다.

1단계: 로그인 클래스

APP.Signin = class {
    constructor($target) {
        this.values = {}; // Store any required state
        if ($target) this.$target = $target; // The DOM element triggering the popover
        this.init(); // Initialize the popover
        return this;
    }

    // Trigger the shake animation
    shake() {
        this.$tippy.classList.add('shake');
        return this;
    }

    // Handle Sign-In button clicks
    onSigninClicked(event) {
        event.preventDefault();

        // Retrieve the entered email
        let email = document.querySelector('.app-signin-email').value;

        // Error and success handlers
        let _onError = () => this.shake();
        let _onSuccess = (response) => {
            if (response.errors.length) {
                this.shake(); // Shake on error
            } else {
                // Handle successful login
                console.log('Login successful!');
            }
        };

        // Simulate a backend login request
        let form_data = new FormData();
        form_data.append('method', 'quickSignIn');
        form_data.append('email', email);

        axios({
            method: 'POST',
            url: 'path/to/server',
            data: form_data,
            headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        })
            .then((response) => (typeof response.data === 'string' ? JSON.parse(response.data) : response.data))
            .then(_onSuccess)
            .catch(_onError);
    }

    // Define the HTML content of the popover
    getContent() {
        return `
            <div>




<hr>

<p><strong>2228+ FREE</strong> <u><b><strong>RESOURCES</strong></b></u> <strong>FOR DEVELOPERS!! ❤️</strong> ?? <strong><sub><strong>(updated daily)</strong></sub></strong></p>

<blockquote>
<p>1400+ Free HTML Templates<br><br>
359+ Free News Articles<br><br>
69+ Free AI Prompts<br><br>
323+ Free Code Libraries<br><br>
52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!<br><br>
25+ Free Open Source Icon Libraries</p>
</blockquote>

<p>Visit dailysandbox.pro for free access to a treasure trove of resources!</p>


<hr>

<h3>
  
  
  Part 3: Wiring It All Together
</h3>

<p><strong>Simulated Backend</strong> : If you don’t have a real server, mock responses with a promise:<br>
</p>

<pre class="brush:php;toolbar:false">const mockServer = (email) =>
    new Promise((resolve, reject) => {
        setTimeout(() => {
            if (email === 'test@email.com') resolve({ errors: [] });
            else reject({ errors: ['Invalid email'] });
        }, 500);
    });

팝오버용 CSS: 팝오버가 디자인과 일치하는지 확인하세요. 간단한 설정은 다음과 같습니다.

.app-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-signin-email {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.app-signin-btn {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.app-signin-btn:hover {
    background-color: #0056b3;
}

HTML 트리거 요소: HTML에 트리거 요소를 추가합니다.

<hr>

<h3>
  
  
  4부: 흔들림 효과 테스트
</h3>

<ol>
<li>팝오버를 열려면 <strong>로그인</strong> 버튼을 클릭하세요.</li>
<li>잘못된 이메일을 입력하고 제출하세요. 오류를 나타내는 팝오버 쉐이크를 살펴보세요.</li>
<li>유효한 이메일을 입력하면 흔들리지 않습니다. 성공!</li>
</ol>


<hr>

<h3>
  
  
  결론: 사용자 친화적인 오류 신호
</h3>

<p>흔들기 효과는 추가 메시지로 UI를 어지럽히지 않고 명확하고 직관적인 오류 표시기를 제공하여 사용자 경험을 향상시킵니다. 매끄러운 팝오버를 위한 Tippy.js와 상호작용을 위한 바닐라 JS가 결합된 이 설정은 깔끔하고 기능적이며 시각적으로 매력적입니다.</p>

<p>계속해서 실험하고 수정하세요. 훌륭한 UX는 디테일이 중요하기 때문입니다!</p>

<p>웹 개발에 대한 더 많은 팁을 보려면 <strong>DailySandbox</strong>를 확인하고 <strong>무료 뉴스레터</strong>에 가입하여 앞서 나가세요!</p>