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