Discussion :

[informer]

Bonjour à tous,

J'ai un tourniquet d'images (merci ambrosialaure pour le code complet

Et mon objectif d'associer un texte différent à chaque image et de la faire apparaitre/disparaitre en fonction de la position de l'image associée

J'espère avoir été clair....

Il faut a priori charger ga.js dont on peut trouver le code ici. Je ne sais absolument pas si c'est essentiel mais comme sur certaines fusées, il y a des boulons dont on ne sait pas quoi ils servent mais comme ça fonctionne ... on y touche pas

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="conteneur">
	<div style="animation-play-state: running;" id="parent" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
		<div class="diapositive diapo1"></div>
		<div class="diapositive diapo2"></div>
		<div class="diapositive diapo3"></div>
		<div class="diapositive diapo4"></div>
		<div class="diapositive diapo5"></div>
		<div class="diapositive diapo6"></div>
		<div class="diapositive diapo7"></div>
		<div class="diapositive diapo8"></div>
	</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
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
	#conteneur{
		margin:0px auto;
		width:550px;
		height:300px;
		border:solid 1px white;
		position:relative;
		perspective:800px;
		perspective-origin:10% 50%;
		-webkit-perspective:600px;
		-webkit-perspective-origin:10% 50%;
		-moz-perspective:800px;
		-moz-perspective-origin:10% 50%;
		-o-perspective:800px;
		-o-perspective-origin:10% 50%;
	}
 
	.diapositive{
		position:absolute;
		height:180px;
		width:180px;
		opacity:0.9;
		border:solid 2px white;
		border-radius:8px;
		top:75px;
		left:250px;
		background-size:cover;
 
		transform-origin:0% 50%;
		-webkit-transform-origin:0% 50%;
		-moz-transform-origin:0% 50%;
		-o-transform-origin:0% 50%;
	}
 
	.diapo1{
		transform:rotateY(0deg);
		-webkit-transform:rotateY(0deg);
		-moz-transform:rotateY(0deg) translateZ(1px);
		-o-transform:rotateY(0deg);
		background:url(http://itglobalsolution.fr/freelance/images/galerie_amoa.gif);
	}
	.diapo2{
		transform:rotateY(45deg);
		-webkit-transform:rotateY(45deg);
		-moz-transform:rotateY(45deg) translateZ(2px);
		-o-transform:rotateY(45deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-29_1391009851.jpg);
	}
	.diapo3{
		transform:rotateY(90deg);
		-webkit-transform:rotateY(90deg);
		-moz-transform:rotateY(90deg) translateZ(3px);
		-o-transform:rotateY(90deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390420661.jpg);
	}
	.diapo4{
		transform:rotateY(135deg);
		-webkit-transform:rotateY(135deg);
		-moz-transform:rotateY(135deg) translateZ(4px);
		-o-transform:rotateY(135deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390398904.jpg);
	}
	.diapo5{
		transform:rotateY(180deg);
		-webkit-transform:rotateY(180deg);
		-moz-transform:rotateY(180deg) translateZ(-4px);
		-o-transform:rotateY(180deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390398495.jpg);
	}
	.diapo6{
		transform:rotateY(225deg);
		-webkit-transform:rotateY(225deg);
		-moz-transform:rotateY(225deg) translateZ(-3px);
		-o-transform:rotateY(225deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-22_1390373173.jpg);
	}
	.diapo7{
		transform:rotateY(270deg);
		-webkit-transform:rotateY(270deg);
		-moz-transform:rotateY(270deg) translateZ(-2px);
		-o-transform:rotateY(270deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2014-01-18_1390065946.jpg);
	}
	.diapo8{
		transform:rotateY(315deg);
		-webkit-transform:rotateY(315deg);
		-moz-transform:rotateY(315deg) translateZ(-1px);
		-o-transform:rotateY(315deg);
		background-image:url(http://ambrosialaure.free.fr/citations/2013-12-28_1388239014.jpg);
	}
 
	#parent{
		position:absolute;
		animation:tourne 16s linear infinite;
		transform-origin:250px 50%;
		transform-style: preserve-3d; 
		-webkit-animation:tourne 16s linear infinite;
		-webkit-transform-origin:250px 50%;
		-webkit-transform-style: preserve-3d; 
		-moz-animation:tourne 16s linear infinite;
		-moz-transform-origin:250px 50%;
		-moz-transform-style: preserve-3d; 
		-o-animation:tourne 16s linear infinite;
		-o-transform-origin:250px 50%;
		-o-transform-style: preserve-3d; 
	}
 
	@keyframes tourne{
		from{transform:rotateY(0deg); }
		to{transform:rotateY(360deg); }
	}
	@-webkit-keyframes tourne{
		from{-webkit-transform:rotateY(0deg); }
		to{-webkit-transform:rotateY(360deg); }
	}
	@-moz-keyframes tourne{
		from{-moz-transform:rotateY(0deg);}
		to{-moz-transform:rotateY(360deg); }
	}
	@-o-keyframes tourne{
		from{-o-transform:rotateY(0deg); }
		to{-o-transform:rotateY(360deg); }
	}

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	function PauseAnim() {
	   document.getElementById('parent').style.animationPlayState='paused';
	   document.getElementById('parent').style.MozAnimationPlayState='paused';
	   document.getElementById('parent').style.WebkitAnimationPlayState='paused';
	   document.getElementById('parent').style.OAnimationPlayState='paused';
	}
 
	function LectureAnim() {
	   document.getElementById('parent').style.animationPlayState='running';
	   document.getElementById('parent').style.MozAnimationPlayState='running';
	   document.getElementById('parent').style.WebkitAnimationPlayState='running';
	   document.getElementById('parent').style.OAnimationPlayState='running';
	}

[Cyberdome]

Je crois que la démarche la plus simple serait de créer un div qui contient les paragraphes correspondants aux images du caroussel, puis d'animer le bloc sous la forme d'un slide vertical avec la même durée que le caroussel et d'utiliser par exemple la fonction step() pour faire défiler "en mode diapo". Et ensuite d'ajouter dans les fonctions javascript du carrousel les instructions de mise en pause et de reprise de l'animation texte pour que ça reste synchronisé.

ga.js est inutile pour le caroussel.

Sans le step() ça donnerai un truc dans le genre du code ci dessous. A noter qu'il est pour 11 lignes de texte ce qui permet de configurer le slide sur des tranches de 10%, pour 8 lignes correspondant aux images il faut faire les calculs. Les h1 font 30px de haut on décale donc le bloc titles de 30px tout le 10% du temps de l'animation.

C'est à peaufiner, je suis pas spécialiste, en l'état l'adaptation du javascript ne fonctionne pas...

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
 
<!DOCTYPE html>
<html>
<head>
<style>
 
@keyframes slide {
    0%  {top:   0px;}
    10% {top: -30px;}
    20% {top: -60px;}
    30% {top: -90px;}
    40% {top:-120px;}
    50% {top:-150px;}
    60% {top:-180px;}
    70% {top:-210px;}
    80% {top:-240px;}
    90% {top:-270px;}
    100%{top:-300px;}
}
 
.titlesOverlay {
  overflow: hidden;
  float: left;
  width: 300px;
  height: 30px;
}
 
.titles {
  animation: slide 10s ease-in-out infinite;
  position: relative;
  display: block;
}
 
h1 {
  display:block;
  box-sizing: border-box;
  margin:0;
  padding:0;
  height:30px;
  line-height: 30px;
  font-size:20px;
}
</style>
</head>
<body>
 
<header>
      <div class="titlesOverlay">
        <div class="titles" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
          <h1>Première image</h1>
          <h1>Deuxième image</h1>
          <h1>Troisième image</h1>
          <h1>Quatrième image</h1>
          <h1>Cinquième image</h1>
          <h1>Sixième image</h1>
          <h1>Septième image</h1>
          <h1>Huitième image</h1>
          <h1>Neuvième image</h1>
          <h1>Dixième image</h1>
          <h1>Onzième image</h1>
        </div>
      </div>
</header>
 
<script>
function PauseAnim() {
           document.getElementById('parent').style.animationPlayState='paused';
	   document.getElementById('parent').style.MozAnimationPlayState='paused';
	   document.getElementById('parent').style.WebkitAnimationPlayState='paused';
	   document.getElementById('parent').style.OAnimationPlayState='paused';
 
	   document.getElementsByClassName('titles').style.animationPlayState='paused';
	   document.getElementsByClassName('titles').style.MozAnimationPlayState='paused';
	   document.getElementsByClassName('titles').style.WebkitAnimationPlayState='paused';
	   document.getElementsByClassName('titles').style.OAnimationPlayState='paused';
}
 
function LectureAnim() {
	   document.getElementById('parent').style.animationPlayState='running';
	   document.getElementById('parent').style.MozAnimationPlayState='running';
	   document.getElementById('parent').style.WebkitAnimationPlayState='running';
	   document.getElementById('parent').style.OAnimationPlayState='running';
 
	   document.getElementsByClassName('titles').style.animationPlayState='running';
	   document.getElementsByClassName('titles').style.MozAnimationPlayState='running';
	   document.getElementsByClassName('titles').style.WebkitAnimationPlayState='running';
	   document.getElementsByClassName('titles').style.OAnimationPlayState='running';
}
</script>
</body>
</html>