Faire défiler un texte (fichier *.txt)

**Crachover** · 23/09/2018, 15h01

Bonjour,

J'ai une page web, sur cette page, je fais défiler un texte de droite à gauche, j'utilise pour cela la commande MARQUEE et cela fonctionne très bien. j'ai cependant plusieurs problèmes et demandes...

J'aimerais pouvoir comme indiqué dans le titre, aller chercher le contenu du texte directement dans un fichier *.txt, j'ai essayé avec le code <object data="Classeur1.txt"/> cela fonctionne, le texte est bien là, mais impossible de le mettre en forme, impossible de retirer une barre de défilement horizontale, sauf en fixant la longueur du texte... 100% ne fonctionne pas etc... je me tourne donc vers du JavaScript, mais là, je suis nul...

Donc, je me permet de poster cette demande.

J'aimerais pouvoir :

Faire défiler un texte, (source : *.txt) de droite vers la gauche avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement etc...
Faire défiler un texte, (source : *.txt) de bas en haut, style générique de film dans une box (<div>) avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement, que le texte passe à la ligne automatiquement si la box ne permet pas un affichage en une ligne etc...

Merci d'avance pour votre aide

**NoSmoking** · 23/09/2018, 15h29

Bonjour,
on fait quoi de ton autre discussion, Intégrer fichier TXT avec MARQUEE ,à la quelle il serait poli de répondre, c'est la moindre des choses

.

**Crachover** · 23/09/2018, 15h33

Bonjour,
Il fallait juste m'en laisser le temps...

mais effectivement j'aurais peut-être dû faire l'inverse... répondre et puis poster dans une autre rubrique

personne n'est parfait

**NoSmoking** · 23/09/2018, 16h30

C'est tout à fait faisable en CSS, on en avait parlé sur le forum dans cette discussion : Défilement horizontal en CSS, d'un texte sans saccades, il y a des solutions JavaScript si mes souvenirs sont bons.

J"avais mis un lien vers une démo CSS : [CSS] Texte défilant.

**Crachover** · 25/09/2018, 18h38

Bonjour,

Je reviens vers vous, car je n'y arrive pas... j'arrive bien "en partie" à réaliser les exemples du précédent message, mais je n'arrive pas à les adapter...

Ce que j'aimerais ces :

que le texte provienne d'un fichier *.txt
que le code s'adapte automatiquement par rapport à la longueur du texte présent dans le fichier *.txt
que le texte démarre du bord droit et non du coté gauche comme dans l'exemple

Ps : le contenu du fichier *.txt sera toujours sur une ligne, car le fichier texte est créé préalablement par du vba Excel !

Merci d'avance pour votre aide :-)

**psychadelic** · 25/09/2018, 20h17

lire un fichier texte => utiliser un fetch
un texte de 50 pages ?

**Crachover** · 25/09/2018, 22h17

Bonjour,

Nonnnnn.... je dirais 100 caractères maximum que je ferais défiler à un endroit de ma page web...

**psychadelic** · 25/09/2018, 22h33

pour faire défiler un texte d'une centaine de caractères le plus simple c(est d'utiliser la fonction animate de jQuery en jouant sur la postion absolute de ton élément contenant le text avec un left identique à la taille du conteneur
puis diminuer sa valeur jusqu'a en être négatiive si la longueur du texte est plus longue que celle du conteneur.
apres dans le callback du animate tu peux éventuellement lancer un setTimeout pour rejouer en boucle cette animation.

**Crachover** · 26/09/2018, 07h08

Holaaaaa, merci, mais là tu parles chinois pour moi

Je vais encore chercher

Bonne journée

**NoSmoking** · 26/09/2018, 10h53

Je viens de mettre en ligne une solution simple de mise en oeuvre : Texte défilant avec départ à droite.
C'est du 100% CSS pure jus concernant l'animation, plus simple que la version précédemment citée.

Concernant le chargement automatique du texte cela peut se faire aisément en utilisant la technique Ajax.

Invité · 26/09/2018, 12h11

Bonjour,

1- @NoSmoking
Ce serait bien que tu affiches dans la page démo aussi le code HTML + CSS.
Notamment pour les débutants : ça éviterait d'avoir à chercher dans le code source.

Code html :

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

1
2
3
      <div class="marque-rtl">
        <div class="msg">Texte défilant horizontalement plus long que la fenêtre de défilement</div>
      </div>

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
/* texte défilant, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement */
/* le block conteneur */
.marque-rtl {
  max-width: 30em;
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  overflow: hidden;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marque-rtl > div {
  display: inline-block;
  padding-right: 2em;
  padding-left: 100%;
  white-space: nowrap;
  animation: defilement-rtl 15s infinite linear;
  cursor: pointer;
}
.marque-rtl:hover > div {
  animation-play-state: paused;
}
.msg {
  font-size: 1.5em;
  line-height: 2em;
}
.msg:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-100%,0,0);
  }
}

2- Pour intégrer le fichier texte avec PHP :

Code php :

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

1
2
3
      <div class="marque-rtl">
        <div class="msg"><?php include('Classeur1.txt'); ?></div>
      </div>

Il faut que le fichier ait l'extension .php, et bien sûr que PHP soit activé !

3- Pour un défilement vertical : https://codepen.io/jreaux62/pen/JagyMj

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
/* ---------------- */
/* Texte défilant vertical, de bas en haut */
.marque-ver {
  position:relative;
  max-width: 30em;
  height:6em;
  margin: 2em auto;
  border: 10px solid #F0F0FF;
  overflow: hidden;
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
.marque-ver > div {
  position:relative;
  padding: 2em;
  padding-top: 6em; /* meme que height du parent */
  animation: defilement-ver 10s infinite linear;
  cursor: pointer;
}
.marque-ver:hover > div {
  animation-play-state: paused;
}
.msg {
  font-size: 1.5em;
  line-height: 1.5em;
}
.msg:first-letter {
  font-weight: 700;
  color: #F00;
}
@keyframes defilement-ver {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-100%,0);
  }
}
/* ---------------- */

Remarque : la vitesse de défilement va dépendre du nombre de lignes de texte (puisque c'est sa hauteur qui est prise en compte).

**NoSmoking** · 26/09/2018, 16h48

Ce serait bien que tu affiches dans la page démo aussi le code HTML + CSS.

Je fais ce que je veux avec mes sources

Notamment pour les débutants : ça éviterait d'avoir à chercher dans le code source.

Un minimum de recherche n'a jamais fait de mal à personne et je dirais même que c'est d'autant plus vrai pour les débutant

Ceci étant plus sérieusement, cette page fait partie de la dizaine de pages que j'ai en souffrance depuis le début de l'année ... alors dès que j'aurais vraiment du temps j'essaierais de la finaliser suivant mon schéma habituel.

Pour info j'ai également le déplacement vertical

Invité · 26/09/2018, 18h33

Mea culpa !

Je n'avais pas vu toutes tes sources (CSS) !
Beau travail, et très détaillé.

Chapeau.

Comme disais mon grand-père :

"Je n'ai rien dit avant de parler"

**Crachover** · 27/09/2018, 16h25

Salut,

Super, merci beaucoup, cela fonctionne très bien

**psychadelic** · 29/09/2018, 01h06

Envoyé par Crachover

J'aimerais pouvoir :
[*]Faire défiler un texte, (source : *.txt) de bas en haut, style générique de film dans une box (<div>) avec possibilité de choisir la taille du texte, la couleur, la couleur de fond de la zone de défilement, que le texte passe à la ligne automatiquement si la box ne permet pas un affichage en une ligne etc...

J'avais vu ce truc la un jour, puis je viens de madire que c'est pile poil ce que tu recherche

==> https://codepen.io/thatbram/pen/KuHsl

**Crachover** · 06/10/2018, 16h39

Je créé mes pages, je test sur mon pc, tout est nickel, même avec un include PHP... je lance la page sur ma SMART TV et là.... rien, snif, le code de NoSmoking ne fonctionne pas sur une SMART TV... le texte n'apparait pas, pourquoi ????

Pour info :
un petit exemple, sur ma SMART TV Samsung la déclaration des variables LET ne fonctionne pas, je dois obligatoirement mettre VAR...

Une idée ?

Invité · 06/10/2018, 17h39

Bonjour,

Envoyé par Crachover

...sur ma SMART TV Samsung la déclaration des variables LET ne fonctionne pas, je dois obligatoirement mettre VAR...

Oui, on avait déjà vu ça (dans une autre discussion).

Peux-tu re-montrer ton code ?

**Crachover** · 07/10/2018, 08h53

Salut,

Voici...

messageiframe.php

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Message</title>
</head>
<body>
<div class="marque-rtl">
<div id="messageii" class="msg"><?php include('Classeur1.txt'); ?></div>
</body>
</html>

css.css

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
/* texte défilant, de droite vers la gauche, avec départ du texte à droite de la fenêtre de défilement */
/* le block conteneur */
body
{
  background-color: black; /* Le fond de la page sera noir */
  color: #A6A6A6; /* Le texte de la page sera blanc */
}
.marque-rtl {
  max-width: 296px;
  border: 1px solid #A6A6A6;
  overflow: hidden;
}
.marque-rtl > div {
  display: inline-block;
  padding-right: 296px;
  padding-left: 296px;
  white-space: nowrap;
  animation: defilement-rtl 15s infinite linear;
  cursor: pointer;
}
.msg {
  font-size: 16px;
  line-height: 25px;
}
@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-100%,0,0);
  }
}

Classeur1.txt

Code :

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

Vous pouvez écrire içi ... :-) un texte... blablabla...

Code iframe de ma page index.htm

Code html :

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

1
2
<span style='mso-ignore: vglayout; position: absolute; z-index: 2; margin-left: 18px; margin-top: 260px; left: 890px; top: 355px;'><div>
<iframe id="messagei" name="messagei" title="messagei" src="messageiframe.php" frameborder=0  height=91px width=100% scrolling="No" marginheight="0" marginwidth="0"></iframe></div></span>

Invité · 07/10/2018, 09h25

Bonjour,

Je doute que ta SMART TV interprète le PHP.

**Crachover** · 07/10/2018, 09h43

si... en tapant ce code, le texte est bien affiché sur la SMART TV... c'est à mon avis au niveau des animations...

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test PHP Smart TV</title>
</head>
<body>
<?php include('Classeur1.txt'); ?>
</body>
</html>

Faire défiler un texte (fichier *.txt)

JavaScript

Discussions similaires

Partager

Partager