Apparition progressive d'un texte lettre par lettre

Version imprimable

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

17/07/2019, 20h42
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, 19h25
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, 15h16
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, 16h35
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, 19h35
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.

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