Animation images fullscreen
je ne peux pas poser de question sur le forum js.
Il y a un problème dans mon animation, c'est que la première image (#bgfade1) et son titre n'apparaissent que quelques centièmes de seconde, avec donc une opacité minuscule), la seconde image (#bgfade2) apparaît tout de suite. Ce qui donne une impression de flash dans les yeux lors de l'ouverture de la page.
Il y a aussi un problème d'opacité, comme si elle passait de 0,3 à 1 directement, sans transition, et ce sur toutes les images.
Où puis-je poster ce soucis ?
Mes CSS :
Code:
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
| #bgfadewrap {
position: fixed;
overflow: hidden;
margin: 0px;
}
#bgfadewrap > div {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#bgfadewrap, #bgfadewrap > div {
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
margin: 0px;
}
#bgfade1 {
background-image: url(img/Lou_2.JPG);
}
#bgfade2 {
background-image:url(img/Lou_1.JPG);
}
#bgfade3 {
background-image:url(img/Lou_3b.jpg);
}
/* bloc de texte qui SLIDE */
#bgfadewrap > div > div {
position: fixed;
padding: 0;
/* [disabled]top: 270px; */
width: 100%;
bottom: 0px;
}
#bgfadewrap > div > div h1 {
text-align: right;
color: #FFFFFF;
opacity: 0.6;
text-decoration: none;
text-shadow: 1px 1px #000000;
font: 12vw/10vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
/* [disabled]margin-bottom: 5%; */
/* [disabled]margin-left: 20%; */
/* [disabled]margin-right: 20%; */
/* [disabled]margin-top: 2%; */
bottom: 0px;
right: 0px;
position: absolute;
}
#bgfadewrap > div > div a {
text-align: center;
font-size: 140%;
color: rgba(204,102,153,0.8);
margin: 0 20%;
} |
Mon
Code:
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
| <div id="bgfadewrap">
<div id="bgfade1">
<div>
<h1>LIFE<br>
IS<br>
GREAT</h1>
<div></div>
</div>
</div>
<div id="bgfade2">
<div>
<h1>LIFE<br>
IS<br>
GREAT</h1>
<div></div>
</div>
</div>
<div id="bgfade3">
<div>
<h1>ENJOY & SMILE</h1>
<div>
</div> </div>
</div>
</div> |
et le JS :
Code:
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
| <script>
new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );
var bgfade = '#bgfadewrap'; // variable globale
function background_init() {
$(bgfade).css({'height':$(window).height()+'px','width':$(window).width()+'px'});
}
function background_anim() {
var bg_H = $(bgfade).height();
$(bgfade+' > div > div').first().css({'opacity':'1','right':'0%'}, 1400).animate({'opacity':'0','right':'-100%'}, 1400);
$(bgfade+' > div > div > div').css({'opacity':'1','right':'100%'}, 1600).animate({'opacity':'1','right':'-100%'}, 1600);
$(bgfade+' > div').first().appendTo(bgfade).fadeOut(1000);
$(bgfade+' > div').first().fadeIn(1000);
$(bgfade+' > div > div').css({'opacity':'0','right':'-100%'}, 1400).animate({'opacity':'1','right':'0'}, 1400);
$(bgfade+' > div > div > div').first().css({'opacity':'1','right':'0%'}, 1600).animate({'opacity':'1','right':'-100%'}, 1600);
setTimeout(background_anim, 6000); // 6 secondes
}
$(window).on('load', function(){
$(bgfade+' > div').hide();
background_init();
background_anim();
});
$(window).on('resize', function(){
background_init();
});
</script> |
Merci pour ton aide.
dh
Animation d'un titre venant de droite ou de gauche via CSS. Titres statiques.
Bonjour,
J'ai un diaporama de 3 images auxquels correspond 3 titres. Un par image.
Je tente de faire venir le 1er et le 3e de droite à gauche
et le second de gauche à droite.
J'ai réussi à animer le second titre, mais rien à faire pour les deux autres.
Mes CSS :
Code:
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
| #bgfadewrap > div > div h1 {
text-align: right;
color: #FFFFFF;
opacity: 0.6;
text-decoration: none;
text-shadow: 1px 1px #000000;
font: 12vw/10vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
/* [disabled]margin-bottom: 5%; */
/* [disabled]margin-left: 20%; */
/* [disabled]margin-right: 20%; */
/* [disabled]margin-top: 2%; */
bottom: 0px;
right: 0px;
position: absolute;
}
#bgfadewrap > div > div > div h1 {
text-align: left;
color: #00CC99;
opacity: 0.6;
text-decoration: none;
text-shadow: 1px 1px #000000;
font: 12vw/10vw Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
/* [disabled]margin-bottom: 5%; */
/* [disabled]margin-left: 20%; */
/* [disabled]margin-right: 20%; */
/* [disabled]margin-top: 2%; */
bottom: 0px;
left: 0px;
position: absolute;
} |
et l'animation via CSS :
Code:
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
| /* TRANSLATION DES TITRES 1 et 3 */
#bgfade1 > div h1, #bgfade2 > div h1, #bgfade3 > div h1 {
margin:0;
animation: translate-in-out 12s ease infinite 0s;
right: -100%;
}
#bgfade1 > div h1 { animation-delay: 0; }
#bgfade3 > div h1 { animation-delay: 8s; }
/* définition des étapes */
@keyframes translate-in-out {
0%, 100% {
right: -100%;
}
8.33% {
right: 0;
}
33.33% {
right: 0;
}
41.67% {
right: -100%;
}
}
/* ----------- */
/* ----------- */
/* TRANSLATION DU TITRE 2 */
#bgfade2 > div div h1 {
margin:0;
animation: translate-in-out 12s ease infinite 0s;
left: -100%;
}
#bgfade2 > div div h1 { animation-delay: 4s; }
/* définition des étapes */
@keyframes translate-in-out {
0%, 100% {
left: -100%;
}
8.33% {
left: 0;
}
33.33% {
left: 0;
}
41.67% {
left: -100%;
}
} |
Je ne suis pas certain que mon code soit très "catholique" :oops:
Merci pour votre aide et bon week-end,
dh
