[JavaScript] [jQuery, plugin] Afficher un texte lettre par lettre

danielhagnoul · 01/12/2012, 23h08

[jQuery, plugin] Afficher un texte lettre par lettre

Il suffit de copier-coller le code pour le tester.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Plugin jQuery dvjhEcrit</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; /*border:0.1rem dotted grey;*/ }
			.table1 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { min-height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
		</style>
	</head>
	<body>
		<h1>Plugin jQuery dvjhEcrit</h1>
		<h2>Code v1.0.0 2012-12-01</h2>
		<section class="conteneur">
			<section class="table1">
				<section class="ligne">
					<article class="hyphens">
 
					</article>
					<article class="hyphens">
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-01T22:55:22.955+01:00" pubdate>2012-12-01T22:55:22.955+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			/*
			 * Plugin jQuery dvjhEcrit
			 * 
			 * Daniel Hagnoul
			 * 
			 * Code v1.0.0 2012-12-01
			 * ------------------------------------------
			 * Usage :
			 * 
			 * $( selector ).dvjhEcrit({
			 *     "text" : "le texte à écrire"
			 * });
			 *
			 * Options disponibles, réglages par défaut :
			 *     "backgroundColor" : "#ffffff",
			 *     "color" :"#000000",
			 *     "fontFamily" : "cursive",
			 *     "fontSize" : "1.2em",
			 *     "fontWeight" : "normal",
			 *     "lineHeight" : "1.5em",
			 *     "letterSpacing" : "0.15em",
			 *     "interval" : 100,
			 *     "text" : ""
			 */
			( function( $ ){
				$.fn.dvjhEcrit = function( options ){
					var opts = $.extend( true, {}, $.fn.dvjhEcrit.defaults, options );
 
					return this.each( function( i, item ){
						var interval = parseInt( opts.interval , 10) || 100,
							tabChaine = opts.text.split(''),
							longueur = tabChaine.length,
							lettre = [];
 
						for( var k = 0; k < longueur; k++ ){
							lettre.push(
								$( "<span/>", { 
									"css" : {
										"display" : "none",
										"backgroundColor" : opts.backgroundColor,
										"color" : opts.color,
										"fontFamily" : opts.fontFamily,
										"fontSize" : opts.fontSize,
										"fontWeight" : opts.fontWeight,
										"lineHeight" : opts.lineHeight,
										"letterSpacing" : opts.letterSpacing
									}, 
									"text" : tabChaine[ k ] 
								})
							);
						}
 
						$( item ).queue( function(){
							for( var i = 0; i < longueur; i++ ){
								lettre.shift().appendTo( item ).delay( interval * i ).fadeIn( 50 );
							}
 
							$( this ).dequeue();
						 });
					});
				}
 
				$.fn.dvjhEcrit.defaults = {
					"backgroundColor" : "#ffffff",
					"color" :"#000000",
					"fontFamily" : "cursive",
					"fontSize" : "1.2em",
					"fontWeight" : "normal",
					"lineHeight" : "1.5em",
					"letterSpacing" : "0.15em",
					"interval" : 100,
					"text" : ""
				};
			})(jQuery);
 
			$( function(){
				var 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).",
					str2 = "Les formalistes étudient les fonctions des éléments et leurs relations au système. C'est " +
					"dans ce cadre qu'ils s'intéressent aux genres et types. Suivant eux, la différence entre langue " +
					"littéraire et langue ordinaire (la « littérarité ») tient à la défamiliarisation comme procédé " +
					"(voir Chklovski, « L'art comme procédé », 1917). L'art renouvelle la perception automatisée de " +
					"la langue par des procédés qui défamiliarisent. Les genres sont ainsi conçus comme " +
					"des « groupements constants de procédés » (p. 302) ; ils varient suivant l'organisation et la " +
					"hiérarchie des procédés qu'ils mettent en jeu. Jakobson appellera dominante le ou les procédés " +
					"auquel les autres sont soumis. Le concept de dominante décrit l'élément d'un type, par exemple " +
					"la prosodie, qui caractérise la forme et détermine les autres éléments.";
 
				$( "article" ).eq( 0 ).dvjhEcrit({
					"text" : str1
				});
 
				$( "article" ).eq( 1 ).dvjhEcrit({
					"text" : str2
				});
			});
		</script>
	</body>
</html>

vermine · 02/12/2012, 11h33

Salut Daniel,

J'essaie de regarder ça cette semaine. Ce sera peut-être ajouté à la FAQ.

SylvainPV · 02/12/2012, 21h37

Pourquoi passer le texte en Javascript ? On peut le laisser dans l'élément HTML, c'est plus simple :
http://jsfiddle.net/Yhzgg/1/

danielhagnoul · 02/12/2012, 22h34

Bien entendu, on peut choisir de modifier un texte existant dans un élément du DOM.

Personnellement je préfère ajouter (append) à un élément du DOM (on préserve un éventuel contenu existant).

mekal · 08/12/2012, 21h10

ajouter un span pour chaque lettres me parait un peut lourd par contre un tiret en fin de ligne pour chaque mot non terminé c'est pas mal

danielhagnoul · 08/12/2012, 21h53

Une solution "récursive" sans "découpage" du texte en "span" :

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
 
			/*.table1 .ligne article:nth-of-type(1) { width:125rem; }*/
 
			.table2 .ligne { height:20rem; }
			.table2 article { width:80rem; }
 
			/* TEST */
			.lettreParLettre {
				font-family: cursive;
				font-size: 1.2rem;
				font-weight: normal;
				line-height: 1.5rem; 
				letter-spacing: 0.15rem;
			}
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article class="lettreParLettre">
 
						<div id="msg1" class="hyphens"></div>
 
					</article>
					<article class="lettreParLettre">
 
						<div id="msg2" class="hyphens"></div>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-08T21:50:39.402+01:00" pubdate>2012-12-08T21:50:39.402+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
				var 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).",
					str2 = "Les formalistes étudient les fonctions des éléments et leurs relations au système. C'est " +
					"dans ce cadre qu'ils s'intéressent aux genres et types. Suivant eux, la différence entre langue " +
					"littéraire et langue ordinaire (la « littérarité ») tient à la défamiliarisation comme procédé " +
					"(voir Chklovski, « L'art comme procédé », 1917). L'art renouvelle la perception automatisée de " +
					"la langue par des procédés qui défamiliarisent. Les genres sont ainsi conçus comme " +
					"des « groupements constants de procédés » (p. 302) ; ils varient suivant l'organisation et la " +
					"hiérarchie des procédés qu'ils mettent en jeu. Jakobson appellera dominante le ou les procédés " +
					"auquel les autres sont soumis. Le concept de dominante décrit l'élément d'un type, par exemple " +
					"la prosodie, qui caractérise la forme et détermine les autres éléments.";
 
					var showText = function( target, message, index, interval ){
						if ( index < message.length ){
							$( target ).append( message[ index++ ] );
 
							setTimeout( function(){
								showText( target, message, index, interval);
							}, interval);
						}
					}
 
					showText("#msg1", str1, 0, 100);
 
					showText("#msg2", str2, 0, 100);
			});
 
			$( window ).load( function(){
 
			});
		</script>
	</body>
</html>

danielhagnoul · 08/12/2012, 22h38

Bonsoir

Version 1.1.0 du plugin utilisant la solution récursive.

Ma préférence reste à la première version, car on peut jouer sur le "fading" de chaque caractère. Mais pour les valeurs par défaut des options, les deux solutions donnent un résultat identique.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			article { display:table-cell; text-align:justify; /*border:0.1rem dotted grey;*/ }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { min-height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article>
 
					</article>
					<article>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-08T22:29:57.421+01:00" pubdate>2012-12-08T22:29:57.421+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			/*
			 * Plugin jQuery dvjhEcrit
			 * 
			 * Daniel Hagnoul
			 * 
			 * Code v1.1.0 2012-12-08
			 * ------------------------------------------
			 * Usage :
			 * 
			 * $( selector ).dvjhEcrit({
			 *     "text" : "le texte à écrire"
			 * });
			 *
			 * Options disponibles, réglages par défaut :
			 *     "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" : ""
			 */
			( function( $ ){
				$.fn.dvjhEcrit = function( options ){
					var opts = $.extend( true, {}, $.fn.dvjhEcrit.defaults, options );
 
					return this.each( function( i, item ){						
						var interval = parseInt( opts.interval , 10) || 100,
							tabChaine = opts.text,
							longueur = tabChaine.length,
							conteneur = $( "<div/>", {
								"css" : {
									"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
								}
							}).appendTo( item ),
							showText = function( k ){
								if ( k < longueur ){
									$( conteneur ).append( tabChaine[ k++ ] );
 
									setTimeout( function(){
										showText( k );
									}, interval);
								}
							};
 
							showText( 0 );
					});
				}
 
				$.fn.dvjhEcrit.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" : ""
				};
			})(jQuery);
 
			$(function(){
				var 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).",
					str2 = "Les formalistes étudient les fonctions des éléments et leurs relations au système. C'est " +
					"dans ce cadre qu'ils s'intéressent aux genres et types. Suivant eux, la différence entre langue " +
					"littéraire et langue ordinaire (la « littérarité ») tient à la défamiliarisation comme procédé " +
					"(voir Chklovski, « L'art comme procédé », 1917). L'art renouvelle la perception automatisée de " +
					"la langue par des procédés qui défamiliarisent. Les genres sont ainsi conçus comme " +
					"des « groupements constants de procédés » (p. 302) ; ils varient suivant l'organisation et la " +
					"hiérarchie des procédés qu'ils mettent en jeu. Jakobson appellera dominante le ou les procédés " +
					"auquel les autres sont soumis. Le concept de dominante décrit l'élément d'un type, par exemple " +
					"la prosodie, qui caractérise la forme et détermine les autres éléments.";
 
				$( "article" ).eq( 0 ).dvjhEcrit({
					"text" : str1
				});
 
				$( "article" ).eq( 1 ).dvjhEcrit({
					"text" : str2
				});					
			});
		</script>
	</body>
</html>

02/12/2012, 11h33	#2
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 3 972 Détails du profil Informations personnelles : Âge : 28 Informations forums : Inscription : mars 2008 Messages : 3 972 Points : 27 504 Points : 27 504	Salut Daniel, J'essaie de regarder ça cette semaine. Ce sera peut-être ajouté à la FAQ. __________________ Médias : influence, pouvoir et fiabilité - Découvrez MooTools - Le mathématicien et ses esclaves Elen Poukram - Isegoria - Sandawe
	00

02/12/2012, 22h34	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 839 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 839 Points : 14 329 Points : 14 329	Bien entendu, on peut choisir de modifier un texte existant dans un élément du DOM. Personnellement je préfère ajouter (append) à un élément du DOM (on préserve un éventuel contenu existant). __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

08/12/2012, 21h10	#5
mekal Membre chevronné Krusty Inscription : mai 2009 Messages : 518 Détails du profil Informations personnelles : Nom : Krusty Localisation : France Informations forums : Inscription : mai 2009 Messages : 518 Points : 736 Points : 736	ajouter un span pour chaque lettres me parait un peut lourd par contre un tiret en fin de ligne pour chaque mot non terminé c'est pas mal __________________ programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
	00

02/12/2012, 21h37	#3
SylvainPV Membre expérimenté Inscription : novembre 2012 Messages : 438 Détails du profil Informations forums : Inscription : novembre 2012 Messages : 438 Points : 571 Points : 571	Pourquoi passer le texte en Javascript ? On peut le laisser dans l'élément HTML, c'est plus simple : http://jsfiddle.net/Yhzgg/1/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email