Apparition progressive d'un texte lettre par lettre

Version imprimable

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, 12h47
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, 17h51
Invité

Bonjour,

Autre script (jQuery) : https://codepen.io/jreaux62/pen/djNZLb
04/07/2019, 21h27
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, 01h39
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, 11h28
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, 16h53
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, 20h31
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, 10h52
melka one

jour

créer plusieurs timeout c'est pas très propre.
08/07/2019, 11h03
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, 16h19
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, 17h40
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, 18h57
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, 17h04
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, 10h15
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...
17/07/2019, 19h42
Beginner.

Citation:

Envoyé par d3LTa7

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

Lol bah oui ça je m'en doutais, je voulais te le dire mais après je me suis dis que c'est peut-être ce que tu voulais...

Alors voici une solution : https://playcode.io/378197?v=2&tabs=...review,console mais cela devient du bricolage, si on savait ce que tu voulais faire on pourrait optimiser... Mais là tu ajoutes des choses au fur et à mesure...

Combien tu comptes mettre de "bouton" (combien de textes à afficher) ? Si il y en a beaucoup il vaudrait mieux utiliser la délégation (un seul gestionnaire d’événements pour tous les "boutons")...

Effectivement je compte en mettre plusieurs pour faire une sorte de CV, à peu près 6 ou 7 boutons cliquable qui ferait apparaitre chacun quelques chose... Soit du texte soit des images

Hummmmm je vois ce que tu veux dire pour le "bricolage" et c'est limite si j'ai du mal à suivre pour le coup.... Mais si tu penses que faire un seul gestionnaire qui gère tout les boutons et faire une chose moins répétitif soit plus compréhensible, alors oui je suis pour !

Sinon hier j'ai fait un autre truc sur le H1 mais bon... C'est pareil j'ai essayé plein de truc pour éviter que cela soit redondant mais voilà le résultat

partie html :

Code:

<h1 id="titre">SUPER TITRE</h1>

partie js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 window.onload = function(){ document.querySelector("#titre").style.opacity = 0; setTimeout(function(){document.querySelector("#titre").style.opacity = 0.1;}, 500); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.2;}, 1000); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.3;}, 1500); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.4;}, 2000); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.5;}, 2500); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.6;}, 3000); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.7;}, 3500); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.8;}, 4000); setTimeout(function(){document.querySelector("#titre").style.opacity = 0.9;}, 4500); setTimeout(function(){document.querySelector("#titre").style.opacity = 1;}, 5000); }
J'ai essayé de faire une boucle, mais mes recherches sur le net m'ont fait comprendre que l'augmentation de 0.1 par boucle était assez complexe

Bonjour,

1- ton "nouveau bricolage" JS se gère très bien en CSS.

Utiliser les transitions CSS
transition CSS
animation CSS
Code:

1 2 3 4 <h1 class="titre">SUPER TITRE 1</h1> <p>sqd qffdsqgsdfg sdfg sdfg</p> <h1 class="titre">SUPER TITRE 2</h1>
Code:

1 2 3 4 5 6 7 8 .titre { animation: showfade 3s 1; animation-fill-mode: forwards; } @keyframes showfade { 0% { opacity:0; margin-left:0; } 100% { opacity:1; margin-left:30px; } }
2- CONSEIL :
si c'est "une sorte de CV", ÉVITE les gadgets qui finissent par lasser, voire énerver le lecteur...
Cliquer sur des boutons, par exemple...

18/07/2019, 18h25
d3LTa7

Ha !! Merci JReaux !! Toujours bon a prendre et merci pour tes liens :)
Pour le CV, c'est juste un exercice, je ne compte pas le mettre en ligne !! C'est juste que ça me permet d'apprendre à faire certaines choses que je pourrais utiliser plus tard peut être :)

jour

dans l'optique de comprendre tes erreurs la version js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener('load', function(){fade(0)},false)
 
function fade(compteur){
 
	compteur+=0.1
 
	document.querySelector("#titre").style.opacity = compteur
 
	if(compteur<1){
 
		setTimeout(fade,40,compteur);
	}
}

Merci beaucoup Melka One !! c'est super clair comme code !!

Du coup je buche sur un truc depuis toute l'aprem... j'essaye de faire apparaitre chaque lettre les une après les autres... Et j'y arrive pas... grrrr

J'ai fait quelques changement du coup :

html:

Code:

<div id="titre" class="titre"></div>

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
function fade(compteur){
    compteur += 0.1;
   var index = 0
   for (i = 0; i < 5; i++){
 
        document.querySelector('.lettre' + index).style.opacity = compteur;
        if (compteur<1){
            setTimeout(fade,100,compteur);
            if (compteur>0.6){
                var index = index +1
            }    
        }     
   }
 }
 
 
 
var tabnom = ['T','i','t','r','e'];
var titrenom = document.getElementById('titre');
 
for (let i = 0; i < tabnom.length; i++){
    var divlettre = document.createElement('div');
    divlettre.className = 'lettre' + i;
    divlettre.textContent = tabnom[i];
    titrenom.appendChild(divlettre);
    divlettre.style.opacity = 0;
    window.addEventListener('load', function(){
    fade(0)
    },false)
}

Bon je précise que j'ai essayé plein de truc (je suis sur ce problème depuis 5/6 h) et là je m'avoue vaincu

Bonjour !!

Je me permet de relancer cette discussion car je viens de me remettre à mes codes (oui j'avais un peu abandonné pendant l'été avec le taf.... oui je sais c'est pas bien...)

Et donc pour mon titre et l'apparition des lettres avec opacité reste pareil.... j'ai bien la première qui apparait mais les autres reste en opacité 0

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
 
function fade(compteur){
    compteur += 0.1;
    var index = 0
    document.querySelector('.lettre' + index).style.opacity = compteur;
    if (compteur<1){
        setTimeout(fade,100,compteur);
        if (compteur>0.6){
            var index = index +1
            }
        }
    }
 
 
 
var tabnom = ['M','o','n','.','T','i','t','r','e'];
var titrenom = document.getElementById('titre');
 
for (let i = 0; i < tabnom.length; i++){
    var divlettre = document.createElement('div');
    divlettre.className = 'lettre' + i;
    divlettre.textContent = tabnom[i];
    titrenom.appendChild(divlettre);
    divlettre.style.opacity = 0;
    window.addEventListener('load', function(){
    fade(0)
    },false)
}

30/09/2019, 14h16
Invité
Bonjour,

à voir :
- animate.css
- https://jqueryui.com/effect/

Bonjour,

Citation:

j'ai bien la première qui apparait mais les autres reste en opacité 0

Tu te retrouves avec deux variables déclarées index, il te faut de plus passer celle-ci en paramètre pour assurer son suivi.
La syntaxe de ta fonction devrait être
Code:

1 2 function fade(opacite, index) { }
D'autre part l'enchainement des opérations ne me semble pas cohérent, je verrais plutôt quelque chose comme
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 function fade(opacite, index) { opacite += 0.1; // récup. élément concerné const elem = document.querySelector('.lettre' + index); // si l'élément existe if (elem) { // application opacité elem.style.opacity = opacite; // si l'opacité est égale à 1 if (opacite > .9) { //réinitialisation du niveau opacite = 0; // on passe à l'élément suivant index += 1; } // rappel de la fonction setTimeout(fade, 100, opacite, index); } // sinon c'est fini else { // message facultatif console.log("c'est fini!"); } }
avec un premier appel
Code:

1 2 3 window.addEventListener('load', function() { fade(0, 0); }, false);

02/10/2019, 15h35
Invité

Bonjour,

1- je ne vois toujours pas l'intérêt de faire ça (opacité) en JavaScript, alors qu'un animation CSS le fait très bien.
En JS, on peut se contenter d'un classList.toggle() si on veut.

2- De mon coté, je me suis un peu amusé : https://codepen.io/jreaux62/pen/djNZLb
Il suffit d'adapter.
02/10/2019, 18h35
NoSmoking

Citation:

Envoyé par jreaux62

1- je ne vois toujours pas l'intérêt de faire ça (opacité) en JavaScript, alors qu'un animation CSS le fait très bien.

on est bien d'accord, cependant d3LTa7 a dit

Citation:

C'est juste que ça me permet d'apprendre à faire certaines choses que je pourrais utiliser plus tard

et c'est dans ce cadre que bien des réponses lui ont été fournies, corriger ses erreurs l'aidera sûrement à progresser.

Les animations gérées via le CSS sont aussi bien souvent plus fluides.

Certaines animations sont simples à mettre en oeuvre et lorsque l'on utilise JavaScript pour l'initialisation, autant l'utiliser jusqu'au bout.

Le CSS et le JavaScript sont des domaines bien différents et il est important de bien savoir ce que chacun fait, il ne faut donc, dans certains cas, ne pas s'embrouiller et bien séparer les deux domaines.

Ceci étant, je privilégie (presque) toujours l'ordre suivant : HTML, CSS puis JS (avec changement de classe bien souvent).

Juste entre nous, il y a bien des sites présentant des animations qui me gonfle, même si réussies, c'est un avis personnel, trop d'animation tue l'animation.

Pour finir oui tu as raison de proposer une alternative, d3LTa7 aura ainsi de quoi étudier, mais chaque chose en son temps.