IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Effet de frappe de texte pour un paragraphe en responsive


Sujet :

Responsive design en CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut Effet de frappe de texte pour un paragraphe en responsive
    Hello !!

    Je cherche à faire un effet de frappe de texte (typing) mais pour un paragraphe et faire en sorte que ce paragraphe soit responsive !!

    J'ai déjà réussit à faire cette animation mais juste pour une ligne :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
                <div class="ff ff__1 col-span-6 col-start-2">Nom : 
                    <div class="ff__1__lab">
                        <span class="ffanim ffanim__p">Simpson</span>
                        <div class="ff__1__lab__field w-24"></div>
                    </div>
                </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    .ffanim{
        position: relative;
        width: max-content;
        font-family: "Source Code Pro", monospace;
        font-size: clamp(1rem, 3vw+1rem, 4rem);
        margin-left: .5rem;
        z-index: 5;
    }
    .ffanim::before,
    .ffanim::after{
        content: "";
        position: absolute;
        inset: 0;
    }
    .ffanim::before{
        background: #d1d5db;
    }
    .ffanim::after{
        width: 0.125em;
        background: transparent;
    }
    .ffanim{
        &__p::before{
            animation: write 0.5s steps(7) 1s forwards;
        }
        &__p::after{
            animation: 
                write 0.5s steps(7) 1s forwards, 
                noir 750ms steps(7) 1s 2;
        }
    }
    @keyframes write {
        to {
            left: 100%;
        }
    }
    @keyframes noir {
        to {
            background: black
        }
    }
    Si je dépasse 1 ligne avec ce code, le curseur va prendre 2 lignes au lieu d'une seule etc etc...
    J'ai pas mal cherché sur le net et j'ai trouvé quelques chose de ressemblant :

    http://jsfiddle.net/f2JpQ/

    Le souci c'est que je ne comprend pas du tout le code car c'est du JQuery et que j'aimerais, si possible, l'adapter le plus possible à mon code actuel !

    Merci

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 562
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 562
    Points : 13 243
    Points
    13 243
    Par défaut
    que souhaitez vous comme effets responsifs en plus de cet effet de saisie ?

  3. #3
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    bonjour,


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <p class="animate-text">C'est un texte vraiment magique !</p>
    <p>Ce texte est fixe.</p>
    <p class="animate-text">voici le deuxième texte qui s'affiche à la suite</p>
    <p>Ce texte aussi est fixe.</p>
    <p class="animate-text">Quaerebatur Tyrii textrini prolatae quidam scriptae purpurae tuniculam Graeco est Maras nihil fucandae autem etiam.</p>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    /* effet machine à écrire (SIMPLE) */
    .animate-text { 
    	visibility:hidden;
      font-family:"courier",sans-serif;
      color:black; 
    }
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    /* ------------------------- */
    /* JavaScript pur */
    /* ------------------------- */
    "use strict";
    window.addEventListener("DOMContentLoaded", (event) => {
      animate_text();
    });
    // -------------------
    function animate_text() 
    {
      let delay = 100,
          delay_start = 0,
          contents,
          letters;
     
      document.querySelectorAll(".animate-text").forEach(function (elem) {
        contents = elem.textContent.trim();
        elem.textContent = "";
        letters = contents.split("");
        elem.style.visibility = 'visible';
     
        letters.forEach(function (letter, index_1) {
          setTimeout(function () {
            // ---------
            // effet machine à écrire (SIMPLE)
            elem.textContent += letter;
            // ---------
          }, delay_start + delay * index_1);
        });    
        delay_start += delay * letters.length;
      });
    }

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut
    Et bien merci beaucoup Jreaux ! C'est ce que je voulais !
    Par contre petite question par rapport à ton code (que j'essaye de comprendre )
    Tu utilises forEach car tu as plusieurs classe animate-text mais du coup, si je n'en ai qu'une seule ? Je ne suis pas obligé d'utiliser le forEach ?

  5. #5
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Même avec un seul élément, le script fonctionne.

    Mais si vraiment tu n'en as qu'UN SEUL, autant utiliser un id (au lieu de classe) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p id="animate-text">Quaerebatur Tyrii textrini prolatae quidam scriptae purpurae tuniculam Graeco est Maras nihil fucandae autem etiam.</p>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #animate-text { 
    	visibility:hidden;/*on masque*/
      font-family:"courier",sans-serif;
      color:black; 
    }
    le JS se "réduit" à (j'ai ajouté des commentaires) :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    /* ------------------------- */
    /* JavaScript pur */
    /* ------------------------- */
    "use strict";
    window.addEventListener("DOMContentLoaded", (event) => {
      // Démarrage AUTO
      animate_text();
    });
    // -------------------
    function animate_text() 
    {
      let delay = 100, // délai (en millisecondes) entre chaque affichage de caractère
          delay_start = 0,
          contents,
          letters;
     
      let elem = document.querySelector("#animate-text"); // UNIQUE
        contents = elem.textContent.trim(); // récupère le contenu (texte à traiter)
        elem.textContent = ""; // on vide le contenu
        letters = contents.split(""); // on sépare chaque caractère (lettre/ponctuation/espace)
        elem.style.visibility = 'visible'; // on rend visible le conteneur
     
        letters.forEach(function (letter, index_1) { // pour chaque caractère
          setTimeout(function () {
            // ---------
            // effet machine à écrire (SIMPLE)
            elem.textContent += letter; // affiche le caractère
            // ---------
          }, delay_start + delay * index_1); // index_1 vaut 0 à (letters.length-1)
        });
    }

    On peut aussi démarrer l'écriture AU CLICK sur un bouton, ou tout autre évènement :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="button" id="ecrire-text">Ecrire...</button>
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    window.addEventListener("DOMContentLoaded", (event) => {
      // Démarrage AUTO
    /*
        animate_text();
    */
      // OU : ECRIRE AU CLICK SUR UN BOUTON
      let btn_write = document.querySelector("#ecrire-text"); // button
      btn_write.addEventListener("click", (event) => {
        animate_text();
        btn_write.style.display = 'none'; // on masque le bouton (pour ne pas re-cliquer dessus)
      });
    });

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    147
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 147
    Points : 70
    Points
    70
    Par défaut
    Ha oui sympa au clic !!

    Par contre j'ai pas de curseur qui clignote dans cette version

    En faite mon idée de base est de créé un formulaire qui se rempli tout seul ! Pour la plupart des parties avec des champs simple du genre nom prénom etc etc avec des cases à cocher et bouton radio j'ai pas trop de souci et tout les champs se remplissent bien avec mon scss et mes keyframes ! Mais quand j'ai voulu attaquer la partie text-area j'ai vite déchanté car l'effet ne marche plus en multiligne ^^ Du coup cette façon de faire en JS marche super et j'ai réussi à l’intégrer dans mon formulaire et en jouant avec le css !!

    Voila ce que ca donne déjà ^^ :

    https://codepen.io/OliveSept/pen/KKqWaap

    Mais du coup je me demandais si finalement il n’était pas possible de faire aussi la partie text-area en scss comme les autre champs pour l'optimisation, mais aussi, pour mieux gérer son delay, sa durée et ses step et surtout avoir le curseur qui clignote

    Et à défaut de le lancer au clic, j'aimerais surtout lancer l'animation entière du formulaire à un moment précis du scroll de ma page ! J'avais déjà tenté quelques chose il y a une semaine mais ca ne marchait pas

  7. #7
    Inactif  
    Homme Profil pro
    Webmaster
    Inscrit en
    juin 2021
    Messages
    645
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Arts - Culture

    Informations forums :
    Inscription : juin 2021
    Messages : 645
    Points : 1 221
    Points
    1 221
    Par défaut
    Bonjour,

    là, tu ne montres pas un formulaire...

    perso,

    * il faudrait alors reprendre mon 1er script :
    • en remplaçant (".animate-text") par (".ffanim") (classe à appliquer aussi au "text-area")
    • en adaptant pour prendre en compte les "value" des <input>, ainsi que les chexbox/radio

Discussions similaires

  1. Erreur sur champ text pour un index Full-Text
    Par Steph82 dans le forum Outils
    Réponses: 5
    Dernier message: 06/01/2011, 15h08
  2. Réponses: 2
    Dernier message: 02/02/2006, 19h21
  3. fichier texte pour access
    Par NPP dans le forum Access
    Réponses: 2
    Dernier message: 03/01/2006, 18h18
  4. débloquer les zones de textes pour modif
    Par seb59dk dans le forum IHM
    Réponses: 1
    Dernier message: 09/09/2005, 10h56
  5. différence entre varchar et text pour l'occupation mémoire
    Par champion dans le forum PostgreSQL
    Réponses: 3
    Dernier message: 16/12/2004, 19h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo