Apparition progressive d'un texte lettre par lettre

**d3LTa7** · 03/07/2019, 18h04

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 HTML :

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
<!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 CSS :

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

JS

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

**danielhagnoul** · 03/07/2019, 21h33

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 HTML :

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

<article></article>

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

**d3LTa7** · 04/07/2019, 12h47

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 :

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

1
2
var maVariable = document.getElementById("idDeMonDOM")
maVariable.style.visibility = "visible"

Qui peut s'écrire :

Code :

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

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

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

Invité · 04/07/2019, 17h51

Bonjour,

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

**d3LTa7** · 04/07/2019, 21h27

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 !

**Beginner.** · 06/07/2019, 01h39

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

Invité · 08/07/2019, 11h03

Bonjour,

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

Envoyé par jreaux62

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

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

**d3LTa7** · 08/07/2019, 16h19

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 :

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

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"

Apparition progressive d'un texte lettre par lettre

JavaScript

Vue hybride

Discussions similaires

Partager

Partager