Apparition progressive d'un texte lettre par lettre

Version imprimable

Voir 40 message(s) de cette discussion en une page

Coucou !!

Je cherche a faire apparaitre un texte progressivement suite a une animation déjà existante

Voilà mon code

Bon... mon code est super répétitif et j'imagine que l'on peut faire plus simple, notamment avec un tableau, mais je suis un peut novice en JS donc si vous avez des suggestions par rapport à ça, ce sera avec grand plaisir de les prendre... Par contre avec des explications assez clair que je puisse comprendre :p

En ce qui concerne ma question, j'ai essayé un truc qui ne fonctionne pas... Là, pareil, je veux bien que l'on m'explique ce qui serais sympa de faire

Merci d'avance =)

Code:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="OF.css" />
        <title>Titre</title>
    </head>
    <body>
        <div class="photoanim">
            <div id="image" class="image">
                <img id="foto" src="moioim.jpg">
                <img id="photo" src="moitr.jpg">
                <nav>
                    <ul id="nav">
                        <li><a href="#moa" id="moi">Moi</a></li>
                        <li><a href="#asso" id="asso">Mes Associations</a></li>
                        <li><a href="#video" id="video">Vidéo</a></li>
                        <li><a href="#xp" id="xp">Experiences Professionnelles</a></li>
                        <li><a href="#dip" id="dip">Diplome et Formation</a></li>
                        <li><a href="#motiv" id="motiv">Motivation</a></li>
                        <li><a href="#site" id="site">Site et Reseaux Sociaux</a></li>
                    </ul>
                </nav>
 
            </div>
            <div id="corp" class="corp">
                <div id="titre" class="titre">
                    <p class="lettre" id="lettre">O</p>
                    <p class="lettre" id="lettre">U</p>
                    <p class="lettre" id="lettre">I</p>
                </div>
                <div id="cadre" class="cadre">
                </div>
            </div>
 
        </div>
    </body>
    <script src="OF.js"></script>
</html>

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.photoanim img
{
    width: 250px;
    border-radius: 50%;
    border: 2px solid white;
}
 
.photoanim
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
 
.image
{
    padding: 0px;
    margin: 0px;
    width: 400px;
}
nav ul
{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    list-style-type: none;
    justify-content: space-between;
}
nav ul li a
{
    color: white;
	font-family: 'Pangolin', cursive;
	font-size: 1em;
    text-decoration: none;
    border: #311FD2 1px solid;
    border-radius: 15px;
    background: #311FD2;
    padding: 5px;
}
 
nav ul li a:hover
{
    background: #CFD595;
    color: #5CC1F3;
}
nav ul li
{
    margin: 15px;
}
body{
    background-image: url(bckgrnd.png); 
    background-repeat: no-repeat;
    background-size: cover;
}
 
#bandeau
{
    width: 100px;
}
.corp
{
    display: flex;
    flex-direction: column;
    margin: auto;
}
.titre
{
    display: flex;
    flex-direction: row;
}

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var tof = document.getElementById('foto');
tof.style.position = "absolute";
var topPos = 0;
var dir = -1;
 
 
document.getElementById('moi').style.visibility = 'hidden';
document.getElementById('asso').style.visibility = 'hidden';
document.getElementById('video').style.visibility = 'hidden';
document.getElementById('xp').style.visibility = 'hidden';
document.getElementById('dip').style.visibility = 'hidden';
document.getElementById('motiv').style.visibility = 'hidden';
document.getElementById('site').style.visibility = 'hidden';
function down(){
    topPos += -2 * dir;
    tof.style.top = `${topPos}px`;
    requestAnimationFrame(down);
    if (topPos == 300){
        appar1();
    }
    if (topPos == 350){
        appar2();
        o1()
    }
    if (topPos == 400){
        appar3();
        o2()
    }
    if (topPos == 450){
        appar4();
        o3()
    }
    if (topPos == 500){
        appar5();
    }
    if (topPos == 550){
        appar6();
        o4()
    }
    if (topPos == 600){
        appar7();
    }
    if (topPos == 650){
        dir = 0;
        o5()
    }
}
 
requestAnimationFrame(down);
 
function appar1(){
    document.getElementById('moi').style.visibility = 'visible';
}
function appar2(){
    document.getElementById('asso').style.visibility = 'visible';
}
function appar3(){
    document.getElementById('video').style.visibility = 'visible';
}
function appar4(){
    document.getElementById('xp').style.visibility = 'visible';
}
function appar5(){
    document.getElementById('dip').style.visibility = 'visible';
}
function appar6(){
    document.getElementById('motiv').style.visibility = 'visible';
}
function appar7(){
    document.getElementById('site').style.visibility = 'visible';
}
 
function o1(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.1
}
function o2(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.3
}
function o3(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.5
}
function o4(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 0.7
}
function o5(){
    var opacite = document.getElementsById('lettre');
    opacite.style.opacity = 1
}

:salut:

Il y a déjà quelque temps, lorsque je travaillais en jQuery, j'avais écrit un plugin pour faire ce travail : https://www.developpez.net/forums/d1...e/#post7019334

Voici la version JS de ce plugin :

Code:

<article></article>

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const defaults = {
        "backgroundColor": "#ffffff",
        "color": "#000000",
        "fontFamily": "cursive",
        "fontSize": "1.2em",
        "fontWeight": "normal",
        "lineHeight": "1.5em",
        "letterSpacing": "0.15em",
        "mozHyphens": "auto",
        "webkitHyphens": "auto",
        "msHyphens": "auto",
        "hyphens": "auto",
        "interval": 100,
        "text": ""
    };
 
    const str1 = "Croce est celui qui a exprimé la plus forte hostilité au genre, et son influence a été grande." +
        " Il opposait intuition et logique. À ses yeux, les catégories génériques pervertissent les réactions " +
        "du lecteur qui tente de les appliquer à une oeuvre particulière ; elles le font passer " +
        "d'une réaction intuitive à une réaction logique. De ce point de vue anti-théorique, une " +
        "classification générique de la littérature est un déni de la nature même de la littérature " +
        "et fait violence à la sensibilité du critique et à l'individualité de l'objet. Toute oeuvre " +
        "véritable brise les lois génériques ; la recherche de classifications formelles est donc non " +
        "pertinente et dangereuse. « Tout véritable chef-d'oeuvre a violé la loi d'un genre établi, semant " +
        "ainsi le désarroi dans l'esprit des critiques, qui se virent dans l'obligation d'élargir " +
        "ce genre » (1902, cité dans Théorie des genres, p. 41).";
 
    const dvjhEcrit = (options, parent) => {
        let
            opts = Object.assign({}, defaults, options),
            interval = parseInt(opts.interval, 10) || 100,
            tabChaine = opts.text,
            longueur = tabChaine.length,
            conteneur = document.createElement('div'),
            showText = k => {
                if (k < longueur) {
 
                    //$(conteneur).append(tabChaine[k++]);
 
                    conteneur.append(tabChaine[k++]);
 
                    setTimeout(function () {
                        showText(k);
                    }, interval);
                }
            };
 
        conteneur.style = {
            "backgroundColor": opts.backgroundColor,
            "color": opts.color,
            "fontFamily": opts.fontFamily,
            "fontSize": opts.fontSize,
            "fontWeight": opts.fontWeight,
            "lineHeight": opts.lineHeight,
            "letterSpacing": opts.letterSpacing,
            "-moz-hyphens": opts.mozHypens,
            "-webkit-hyphens": opts.webkitHypens,
            "-ms-hyphens": opts.msHypens,
            "hyphens": opts.hyphens
        };
 
        parent.appendChild(conteneur);
 
        showText(0);
    }
 
    dvjhEcrit({
        "text": str1
    }, document.querySelector('article'));
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

04/07/2019, 13h47
d3LTa7
Merci pour ta réponse... Mais comme tu as sans doute pu le constater de part mon code, tu t'imagines bien que je n'ai pas le niveau pour comprendre ton code... Et du coup beaucoup de passage me pose question...
Déjà tu utilise des "const" et des "let" alors que moi je n'utilise que des "var" Mais j'ai cru comprendre qu'il était mieux d'utiliser const et let... Mais tu les utilises d'une certaine manière... Par exemple tu fais une variable const en y mettant des propriété css... Là tu m'embrouille déjà un peu...
En faite je crois que j'ai pas encore la gymnastique des écritures en raccourcis... comme par exemple
Code:

1 2 var maVariable = document.getElementById("idDeMonDOM") maVariable.style.visibility = "visible"
Qui peut s'écrire :

Code:

document.getElementById("idDeMonDOM").style.visibility = 'visible'

La je crois que tu en utilise plein et du coup tu m'as perdu sur pas mal de ligne :x

Toute la partie "const dvjhEcrit" pas compris à part peut être le "createElement"

Bref je sais que j'en demande peut être beaucoup, mais c'est vrai que je n'aime pas c/c bêtement sans comprendre ce que je fais
04/07/2019, 18h51
Invité

Bonjour,

Autre script (jQuery) : https://codepen.io/jreaux62/pen/djNZLb
04/07/2019, 22h27
d3LTa7

Merci JReaux !! Je vais essayé de décortiquer ça même si je ne maitrise pas encore le JQueray !! :)

Edit : Hummmm j'ai vraiment du mal encore avec JQuery, je pense que je vais m'y mettre dans pas longtemps (d'ailleurs je suis preneur de tout liens vers des cours sympa à ce sujet)... En attendant, et désolé de te demander ça, mais je pourrais avoir une version purement JS ? Merci !
06/07/2019, 02h39
Beginner.

Citation:

Envoyé par d3LTa7

Edit : Hummmm j'ai vraiment du mal encore avec JQuery, je pense que je vais m'y mettre dans pas longtemps (d'ailleurs je suis preneur de tout liens vers des cours sympa à ce sujet)... En attendant, et désolé de te demander ça, mais je pourrais avoir une version purement JS ? Merci !

JQuery n'est pas indispensable, en JS pur ce n'est pas plus compliqué, voici le code en JS pur : https://playcode.io/364844?tabs=script.js,preview
06/07/2019, 12h28
d3LTa7

Merci merci Beginner !! Vraiment sympa !!
(t'as plus l'air "beginner" dans ce domaine en tout cas)
Bon week end à vous =)

Et un ptit dernier pour le plaisir;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
const T={
	m:(q) => {return document.getElementById(q).firstChild},
	mess:"Quel texte innovant! Je suis scié.",
	bouge:() => {t=setInterval(() => 
					{
						if(T.mess){
							T.m("m2").data+=T.mess[0];
							T.mess=T.mess.slice(1);
						}
						else {
							clearInterval(t)
						}
					}
					,100)
				}
 
}	
window.addEventListener("load",() => T.bouge());
 
</script>
 
<div  id="m2"> </div>

06/07/2019, 17h53
d3LTa7

Merci javatwister !!
Je garde tout ca sous le coude !! Pour le moment ton code est encore un peu complexe pour moi !! Mais j'espère que je le comprendrais un jour =D
Pour le moment, celui de beginner est celui que je comprend le mieux :p
06/07/2019, 21h31
Beginner.

Citation:

Envoyé par d3LTa7

Pour le moment, celui de beginner est celui que je comprend le mieux

Ben en fait j'avais juste transformé le code en JS pur mais on pourrait faire encore plus simple : une fonction paramétrable : tu mets juste les paramètres que tu veux container, text et delay...

Voici un exemple : https://playcode.io/365336?tabs=scri...review,console

J'utilise que des choses simples (une boucle for classique...).
08/07/2019, 11h52
melka one

jour

créer plusieurs timeout c'est pas très propre.
08/07/2019, 12h03
Invité
Bonjour,

A PART les codes que j'ai proposé (jQuery), et traduit en JS pur par Beginner :

Citation:

Envoyé par jreaux62

Autre script (jQuery) : https://codepen.io/jreaux62/pen/djNZLb

Citation:

JQuery n'est pas indispensable, en JS pur ce n'est pas plus compliqué, voici le code en JS pur : https://playcode.io/364844?tabs=script.js,preview

TOUS LES AUTRES présentes un DÉFAUT MAJEUR :
- les textes ne sont "accessibles" (car PAS écrits dans le HTML, mais dans le script JS) !
  Les logiciels d'aide à la lecture ne les "voient" pas.
Cela dit, il suffit de pas grand chose pour les adapter...
08/07/2019, 17h19
d3LTa7
Ha oui Jreaux !! Bien vu et effectivement c'est mon cas...
Je pourrais evidement choisir l'option de facilité et déplacer mon texte dans le JS, mais ceci dit j'ai choisis de savoir comment faire en laissant mon texte dans le HTML...

Du coup, en suivant l'exemple de Beginner ( https://playcode.io/365336?tabs=scri...review,console), j'ai mis :
Code:

1 2 var text = document.getElementById('montexte').textContent;
pour le reste j'ai fait tout pareil en ayant créé une div dans mon HTML pour la variable container.

Mais il a pas l'air d'aimer et me met plein de "undefined"

Juste pour le fun une autre version

Code:

1
2
3
4
5
6
7
8
9
10
11
OutChaine="";
InChaine="un texte a faire apparaitre lettre par lettre";
InChaine=InChaine.split('');
function sendletter(){
if (InChaine.length>0){
document.getElementById('res').innerHTML += InChaine.shift();
setTimeout(sendletter,200)
}
}
 
sendletter();

08/07/2019, 18h40
Beginner.
Citation:

Envoyé par d3LTa7

Ha oui Jreaux !! Bien vu et effectivement c'est mon cas...
Je pourrais evidement choisir l'option de facilité et déplacer mon texte dans le JS, mais ceci dit j'ai choisis de savoir comment faire en laissant mon texte dans le HTML...

Ben justement il me semble que jreaux62 dit que c'est un défaut que le texte ne soit pas dans le HTML...
Citation:
Envoyé par d3LTa7

Du coup, en suivant l'exemple de Beginner ( https://playcode.io/365336?tabs=scri...review,console), j'ai mis :

Code:

1 2 var text = document.getElementById('montexte').textContent;
Plutôt que passer le texte autant juste passer l’élément HTML (container) qui contient le texte : https://playcode.io/366919?tabs=scri...review,console (j'ai modifié le code pour que le texte soit dans le HTML...)

Alors moi ce qui est "marrant" c'est qu'il me dit dans la console "text is undefined" Alors que j'ai fait tout pareil :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var container = document.getElementsByClassName('montext');
var delay = 100;
 
function animate(container, delay){
    var text = container.textContent;
    container.textContent = "";
    for (var i = 0; i < text.length; i++) {
        setTimeout(function (){
            container.textContent += text[i];
        }, delay * i);
    }
}

Alors est ce que le souci viendrait du faite que j'apelle la fonction dans une autre ?
voila la suite du JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
var clik = document.querySelectorAll('.moi');
clik.forEach(function(clic){
    clic.addEventListener('click',function(){
        var moitext = document.getElementById('textmoi')
    });
});
*/
function dispwelk(){
    document.getElementById('welk').style.display = "none"
}
 
document.getElementById('moi').onclick = function(){ 
    //document.getElementById('textmoi').style.display = "block";
    animate(container, delay);
    dispwelk();
 
      }
document.getElementById('textmoi').style.display = "none";

et la partie HTML

Code:

1
2
3
4
5
6
7
<ul id="nav">
      <li><a href="#moa" id="moi" class="moi">Moi</a></li>
</ul>
<div id="cadre" class="cadre">
      <p id="welk"> BIENVENUE </p>
      <div class="textmoi" id="textmoi"> Bonjour ! je suis un homme de 38 ans qui essaye d'apprendre Javascript !</div>
</div>

10/07/2019, 19h57
Beginner.
Citation:
Envoyé par d3LTa7

Alors moi ce qui est "marrant" c'est qu'il me dit dans la console "text is undefined" Alors que j'ai fait tout pareil :

Code:

1 2 3 var container = document.getElementsByClassName('montext'); ...
Ici container n'est pas un élément html mais une HTMLCollection... Il faut ajouter [0] pour récupèrer le premier élèment de cette collection : var container = document.getElementsByClassName('montext')[0];...

Sinon tu peux faire var container = document.querySelector(".montext");...

EDIT : Ah oui il y a un autre problème : dans ton code il n'y a pas d’élément ayant la class "montext" donc c'est normal que container soit indéfini... Il faut donc remplacer "montext" par "textmoi"... Ou comme tu as aussi mis un id tu peux faire : var container = document.getElementById("textmoi");...

EDIT2 : Un autre problème il faut utiliser let et non var dans la boucle for : for (let i = 0; i < text.length; i++)Test ici : https://playcode.io/369893?tabs=scri...review,console

C'est parfait !! Merci beaucoup Beginner !! Mais je crois que je vais t’embêter encore un peu désolé !!

Si par malheur je reclick sur le lien il me met des textes assez étrange... Du coup je voulais empêcher le double clic sur le href...

(j'ai revu un peu la partie JS, qui pourrait sembler primitif, mais moi je m'y retrouve mieux ^^ )
Code:

1 2 3 4 5 6 7 8 9 var boutonmoi = document.getElementById('moi'); boutonmoi.addEventListener('click',butonme); function butonme(){ document.getElementById('textmoi').style.display = 'block'; animate(container, delay); dispwelk(); boutonmoi.disabled = true; }
Mais le .disabled n'a pas l'air de marcher sur ce cas de figure :/ ou alors il ne faudrait pas que je le mettent là

EDIT : je pense avoir trouvé une solution avec

Code:

boutonmoi.removeEventListener('click',butonme);

Du coup je voudrais "exporter" cette fonction d'animation sur plusieurs "li" mais je me retrouve confronter à un autre souci...

J'ai tenté une variante :

JS
Code:

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 var container = document.getElementClassName("text"); var delay = 20; function animate(container, delay){ var text = container.textContent.trim(); container.textContent = ""; for (let i = 0; i < text.length; i++) { setTimeout(function (){ container.textContent += text[i]; }, delay * i); } } function dispwelk(){ document.getElementById('welk').style.display = "none" } var boutonmoi = document.getElementById('moi'); boutonmoi.addEventListener('click',butonme); var boutonxp = document.getElementById('xp'); boutonxp.addEventListener('click',butonxp); function butonme(){ document.getElementById('textmoi').style.display = 'block'; animate(container, delay); dispwelk(); boutonmoi.removeEventListener('click',butonme); } function butonxp(){ document.getElementById('exp').style.display = 'block'; animate(container, delay); dispwelk(); boutonxp.removeEventListener('click',butonxp); } document.getElementById('textmoi').style.display = "none"; document.getElementById('exp').style.display = "none";
HTML
Code:

1 2 3 4 5 6 7 8 9 <ul id="nav"> <li><a href="#moa" id="moi" class="moi">Moi</a></li> <li><a href="#xp" id="xp" class="xp">Expérience</a></li> </ul> <div id="cadre" class="cadre"> <p id="welk"> BIENVENUE </p> <div class="text" id="textmoi"> Bonjour ! je suis un homme de 38 ans qui essaye d'apprendre Javascript !</div> <div class="text" id="exp"> J'ai peu d'expérience dans le domaine du développement web mais je suis motivé pour apprendre !</div> </div>
A la base, ma variable "container" était lié à une "id". et cette id est aussi utilisé dans ma fonction "butonme". Le plus simple aurait été de changer la façon de prendre l'élément du DOM par un autre moyen que getElementById de ce faite je peux faire une fonction pour chaque lien (moi et experience) en restant sur l'id (butonme et butonxp) mais avec "class='text" en commun dans le HTML pour que ma fonction "animate" soit utilisable sur chaque... mais apparemment

Code:

var container = document.getElementByClassName('text')

ne marche pas :(

J'ai tenté avec

Code:

var container = document.querySelector('.text');

Curieusement cela marche avec la partie "moi" mais pas avec l'autre

15/07/2019, 18h04
Beginner.
Salut,

- Une remarque dans ton code JS tu as écris : var container = document.getElementClassName("text"); il manque By : var container = document.getElementsByTagName("text");.

- Ensuite tu n'as pas besoin de la class text ni de container, chaque élément est un container (qui contient un texte à afficher)... Mais ton usage de container avec la class text ne fonctionne pas car tu fais cela : animate(container, delay); au lieu de animate(container[0], delay); et animate(container[1], delay);...

J'avais expliqué ce problème dans mon message précédent...

- Utilise donc juste les id de chaque élément...

J'ai modifié un peu ton code, tu peux tester ici : https://playcode.io/374915?tabs=scri...review,console

-------------------------------------
PS : Au lieu de faire cela :
Code:

1 2 document.getElementById('textmoi').style.display = "none"; document.getElementById('exp').style.display = "none";
Tu pourrais utiliser du CSS, ce serait mieux d'ailleurs...
17/07/2019, 11h15
d3LTa7

Haaaaa oui !! J'ai compris !!! Désolé je suis un peu long à la détente !! J'ai encore du mal avec les paramètres des fonctions...

Et oui en mettant "display: none;" dans la partie CSS ça marche tout aussi bien !!

Mais par contre ma solution du "removeEventListener" n'est pas la bonne apparemment car si je click sur "Moi" puis sur "Expérience" et que je revient sur "Moi", là il ne veut plus me remettre le texte... Et du coup mon souci de base revient...

Voir 40 message(s) de cette discussion en une page