視覚的なエラー キューのログイン ポップオーバーに「揺れる」効果を追加する

場合によっては、微妙なデザイン要素がユーザー エクスペリエンスに大きな違いをもたらすことがあります。従来のエラー メッセージを表示する代わりに、ログイン ポップオーバーの「揺れる」効果により、何か問題が発生したことが明確かつ即時に示されます。このチュートリアルでは、 バニラ JavaScript 、CSS アニメーション、およびオープンソース ライブラリ Tippy.js を使用してこの機能を実装する方法を説明します。

私たちの目的は次のとおりです:

1. Tippy.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 を使用してログイン ポップオーバーを作成する

Tippy.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>Web 開発に関するその他のヒントについては、<strong>DailySandbox</strong> をチェックし、<strong>無料のニュースレター</strong>に登録して時代の先を行きましょう!</p>