Ajout d'un effet « Shaking » aux popovers de connexion pour un signal d'erreur visuel

Parfois, des éléments de conception subtils peuvent faire une énorme différence dans l'expérience utilisateur. Au lieu d'afficher les messages d'erreur traditionnels, un effet de « tremblement » sur une fenêtre contextuelle de connexion fournit une indication claire et immédiate que quelque chose s'est mal passé. Ce tutoriel vous guidera dans la mise en œuvre de cette fonctionnalité à l'aide de JavaScript Vanilla, des animations CSS et de la bibliothèque open source Tippy.js.

Notre objectif est de :

1. Créez un popover de connexion avec Tippy.js.
2. Ajoutez l'effet « secouant » lorsque des erreurs se produisent.
3. Réinitialiser automatiquement l'animation une fois le shake terminé.

Plongeons-nous !

---

Partie 1 : Configuration de l'animation tremblante avec CSS

Nous allons commencer par définir une animation CSS réutilisable pour l’effet shake. La règle @keyframes ci-dessous imite une secousse côte à côte :

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

• Détails de l'image clé : La propriété Translate3d déplace légèrement le popover vers la gauche et la droite pour créer l'effet de tremblement.
• Classe réutilisable : L'application de la classe shake à n'importe quel élément déclenche l'animation.

---

Partie 2 : Création du popover de connexion avec Tippy.js

Nous utiliserons Tippy.js pour créer un popover de connexion cliquable. Le popover comprendra :

• Un champ de saisie d'e-mail.
• Un bouton « Connexion ».
• Écouteurs d'événements pour gérer la logique de connexion et l'effet de secousse.

Voici le code JavaScript de base pour configurer le popover :

Étape 1 : la classe de connexion

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 pour le Popover : Assurez-vous que le popover correspond à votre design. Voici une configuration simple :

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

Élément déclencheur HTML : Ajoutez un élément déclencheur à votre HTML :

<bouton>




<hr>

<h3>
  
  
  Partie 4 : Testez l'effet de tremblement
</h3>

<ol>
<li>Cliquez sur le bouton <strong>Connexion</strong> pour ouvrir la fenêtre contextuelle.</li>
<li>Entrez un e-mail invalide et soumettez-le. Regardez le popover trembler, indiquant une erreur.</li>
<li>Entrez un e-mail valide et ne voyez aucune secousse : succès !</li>
</ol>


<hr>

<h3>
  
  
  Conclusion : un signal d'erreur convivial
</h3>

<p>L'effet de tremblement améliore l'expérience utilisateur en offrant un indicateur d'erreur clair et intuitif sans encombrer l'interface utilisateur avec des messages supplémentaires. Combinée avec Tippy.js pour un popover élégant et Vanilla JS pour l'interactivité, cette configuration est propre, fonctionnelle et visuellement attrayante.</p>

<p>Continuez à expérimenter et à peaufiner, car une bonne UX est avant tout une question de détails !</p>

<p>Pour plus de conseils sur le développement Web, consultez <strong>DailySandbox</strong> et inscrivez-vous à notre <strong>newsletter gratuite</strong> pour garder une longueur d'avance !</p>


          </bouton>