Texte qui arrive au fur à et mesure

**X260SH** · 05/06/2013, 22h23

Bonjour !

Je fait une petite présentation en HTML/CSS et j'aimerai savoir s'il était possible de faire apparaître un texte petit à petit.
Voici mon code :

Code HTML/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
<!DOCTYPE html>
<html>
	<head>
 
	<title>Texte défilant</title>
 
	<style>
	div#decl
	{
		position:absolute;
		height : 100%;
		width : 2%;
		background-color:black;
		top : 0;
		right : 0;
	}
 
	nav
	{
		position:absolute;
		top : 0;
		right : 0;
		width : 0;
		font-family:"Segoe UI", Arial;
		transition-delay : 0.5s;
		transition-property: width;
		transition-duration: 2s;
		color:red;
	}
 
	div#decl:hover + nav
	{
		position:absolute;
		top : 0;
		right : 0;		
		width : 25em;
		font-family:"Segoe UI", Arial;
		color:red;
	}
	</style>
 
	</head>
 
	<body>
	<div id="decl"></div>
	<nav>
		Text à afficher.
	</nav>
	</body>
 
</html>

Ca marche bien, mais le problème, c'est que le texte est toujours là : il suffit de décaler un petit peu la page et on le voit. Comment puis-je résoudre ça ?

Merci d'avance !

**rodolphebrd** · 05/06/2013, 22h53

Bonjour,

Quel est précisément l'effet que vous souhaitez obtenir?

Le texte à afficher est dans une balise NAV. Est-ce donc un menu que vous voulez afficher progressivement et selon quelle direction?

Avez-vous un exemple sur le web pour appuyer votre question?

**nicosmash** · 06/06/2013, 08h56

Bonjour,

Il me semble que le problème est que la balise nav sert à lister des liens
Documentio W3 : nav

PS : N'oubliez pas de faire une page css et non de mettre le css avec l'html.

Invité · 07/06/2013, 17h19

Bonjour,
une solution simple :

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
	nav
	{
		position:absolute;
		top: 0;
		right: 0;
		opacity:0;
		transition-delay : 0.5s;
		transition-property: right, opacity;
		transition-duration: 2s;
		font-family:"Segoe UI", Arial;
		color:red;
	}
 
	div#decl:hover + nav
	{
		right: 25em;		
		opacity:1;
	}

**rodolphebrd** · 07/06/2013, 19h20

J'ai plutôt un déclenchement avec:

Code css :

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

1
2
3
4
#decl:hover, nav:hover {
	right: 25em;
	opacity:1;
}

Texte qui arrive au fur à et mesure

CSS

Vue hybride

Discussions similaires

Partager

Partager