Discussion :

[Momodughetts]

Salut, encore un problème avec ce fameux Javascript et jquery.

Alors voilà j'ai un code pour transformer un texte.
Il est récupérer avec une data, stocker dans un tableau est ré-afficher avec l'animation.

Or j'ai créer 3 div différente avec trois data différente pour que les textes respectif s'affiche aux bons endroit, or vue que toute les data sont stocker dans le même tableau le texte entier s'affiche dans les trois div.
En fait il me faudrait soit un tableau associatif qui contient le contenu de mes data avec la cléf data soit trois tableau différents, que je n'arrive pas à faire. Une idée ?

Une solution? Merci

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
function stringToArray(string){
  var array = [];
  var length = string.length;
  var index = 0;
 
  for(index = 0; index < length; ++index){
    array.push(string[index]);
  }
  return array;
}
 
function splitText(){
  var context = $('[data-magic-text]');
  var contents = context.text();
  var letters = stringToArray(contents);
  var markup = '';
  letters.forEach(function(letter){
    markup += '<span>' + letter + '</span>';
  });
  var contextObjet = $('[data-deux-text]');
  var contentsObjet = contextObjet.text();
  var objets = stringToArray(contentsObjet);
  console.log(objets);
  objets.forEach(function(objet){
    markup += '<span>' + objet + '</span>';
  });
  var contextClient = $('[data-trois-text]');
  var contentsClient = contextClient.text();
  var clients = stringToArray(contentsClient);
  clients.forEach(function(client){
    markup += '<span>' + client + '</span>';
  });
  context.html(markup);
  contextObjet.html(markup);
  contextClient.html(markup);
}
 
function animateText() {
  var context = $('[data-magic-text]');
  var contextObjet = $('[data-deux-text]');
  var contextClient = $('[data-trois-text]');
  var delay = 400;
  context.children().each(function(index, letter) {
    setTimeout(function() {
      $(letter).addClass('is-visible');
    }, delay * (index / 15));
  });
  contextObjet.children().each(function(index, objet) {
    setTimeout(function() {
      $(objet).addClass('is-visible');
    }, delay * (index / 15));
  });
  contextClient.children().each(function(index, client) {
    setTimeout(function() {
      $(client).addClass('is-visible');
    }, delay * (index / 15));
  });
}
 
$(document).ready(function(){
  splitText();
  animateText();
});

[Toufik83]

bonsoir,
c'est vrai que ton code est TROP répétitif, tu peux le factoriser en un seul sélecteur comme suite :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div data-magic-text='magic'>texte magic</div>
<div data-deux-text='deux'>texte deux</div>
<div data-trois-text='trois'>texte trois</div>

Code jQuery :

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
 
 
var delay=400, contents, letters, markup;
 
function stringToArray(string) {
  var array = [];
  var length = string.length;
  var index = 0;
 
  for (index = 0; index < length; ++index) {
    array.push(string[index]);
  }
  return array;
}
 
function Go() {
  $('[data-magic-text],[data-deux-text],[data-trois-text]')
    .each(function(index, obj) {
      markup = '';
      contents = $(obj).text().trim();
      letters = stringToArray(contents);
      $(letters).each(function(index_1, letter) {
        markup += '<span>' + letter + '</span>';
        $(obj).html(markup);
        setTimeout(function() {
          $(obj).children('span').eq(index_1).addClass('is-visible');
        }, delay * (index_1 / 15));
      });
    });
}
 
$(document).ready(function() {
 Go();
});

[Invité]

Bonjour,

1- sans vouloir vexer personne... la fonction stringToArray() se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function stringToArray(string) 
{
  let array = string.split('');
  return array;
}

A mon humble avis, on peut même s'en passer... et écrire directement letters = contents.split("");.

2- Je ne vois pas trop à quoi servent les data-xxx. Il suffit d'une classe.

3- au lieu d'ajouter des <span< et une classe "is-visible", il suffit aussi d'ajouter chaque lettre progressivement.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="animate-text">c'est un texte vraiment magic !</div>
<div class="animate-text">voici le texte deux</div>
<div class="animate-text">et voilà enfin le texte trois</div>

Code JavaScript :

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
"use strict";
function animate_text() 
{
  let delay = 400,
  contents,
  letters;
 
  $(".animate-text").each(function(index, obj) {
    contents = $(obj).text().trim();
    $(obj).html(''); // on vide le contenu
    letters = contents.split("");
    $(letters).each(function(index_1, letter) {
      setTimeout(function() {
        $(obj).html( $(obj).html() + letter ); // on ajoute chaque lettre l une après l autre
      }, delay * (index_1 / 5));
    });
  });
}
 
$(document).ready(function() {
  animate_text();
});

Pour que les trois textes démarrent successivement (l'un après l'autre), on peut ajouter un délai supplémentaire : https://codepen.io/jreaux62/pen/djNZLb

Code JavaScrip :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  let delay = 400,
      delay_start = 0,
...
    $(letters).each(function(index_1, letter) {
      setTimeout(function() {
        $(obj).html( $(obj).html() + letter ); // on ajoute chaque lettre l une après l autre
      }, delay_start + delay * (index_1 / 5));
    });
    // le suivant démarre à la fin du précédent
    delay_start += delay * letters.length / 5;

N.B. On est d'accord pour dire que les textes ne doivent pas contenir de balises HTML.
Sinon, celles-ci ne sont pas prises en compte.

Pour aller plus loin : "script machine à écrire JavaScript"

[Toufik83]

oui, @jreaux62 a raison concernant les data-xxx, je voulais pas les supprimer et les remplacer par une simple classe comme il l'a mentionné.
je ne sais pas si tu les utilisent dans un autre endroit...

[Momodughetts]

Ok génial ! Faut que j'apprenne les méthode je connaissais pas eq ni split c'est sûrement pour ça que je n'arrivais pas à diviser mes trois parties! Merci beaucoup, j'ai utiliser des data pour eviter le surchargement de class j'en ai déjà deux appliquer une pour le positionnement, la fameuse magic text donc autant utiliser une data qui me gênera pas. C'est vrai que l'affichage lettre par lettre fera moins charger que span par span !

[Watilin]

Bonsoir,

juste quelques infos complémentaires : une chaîne est un objet itérable. Ça signifie qu’on peut la passer à Array.from :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

letters = Array.from(contents)

… Ou « l’étaler » avec cet opérateur dont le nom français est beaucoup trop compliqué :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

letters = [...contents]

… Ou encore plus simple, utiliser la boucle for/of :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let letter of contents) {
 
}

En temps normal, la méthode .each() de jQuery permet de parcourir les itérables, mais pas les chaînes, car jQuery tente d’analyser les chaînes comme du code HTML ou comme un sélecteur CSS.