Discussion :

[d3LTa7]

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

[mathieu]

que souhaitez vous comme effets responsifs en plus de cet effet de saisie ?

[jreaux62]

bonjour,

• https://codepen.io/jreaux62/pen/djNZLb

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

[d3LTa7]

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 ?

[jreaux62]

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

[d3LTa7]

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

[jreaux62]

Bonjour,

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

perso,

• j'aurais tout fait en JS *
• et, comme tu dis, au scroll : Element.scrollTo()

* 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