Animation images fullscreen

**dhillig** · 04/11/2021, 20h07

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 :

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
#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 html :

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
<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 :

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
		<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

**jreaux62** · 04/11/2021, 21h27

1- Nosmoking a fait un tuto + exemple en full CSS (sans JS).

Diaporama avec effet fade in/out

2- pour adapter aux dimensions de la fenêtre, idem en CSS :

Code css :

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

1
2
3
4
#bgfadewrap {
  width: 100vw; /* largeur fenêtre */
  height: 100vh; /* hauteur fenêtre */
}

**jreaux62** · 04/11/2021, 21h49

Adapté à ton cas, il suffit que :

1- tu ajoutes le 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
33
34
35
/* ----------- */
/* full screen */
#bgfadewrap, #bgfadewrap > div {
  width: 100vw; /* largeur fenêtre */
  height: 100vh; /* hauteur fenêtre */
}
/* ----------- */
/* Diaporama avec effet fade in/out */
/* voir : https://nosmoking.developpez.com/demos/css/diapo_fade_calcul.html */
/* ----------- */
/* définition de l'animation sur les images : delai 3 secondes */
#bgfade1, #bgfade2, #bgfade3 {
  animation: fade-in-out 12s ease infinite 0s;
  opacity: 0;
}
/* définition délai des images */
#bgfade1 { animation-delay: 0s; }
#bgfade2 { animation-delay: 4s; }
#bgfade3 { animation-delay: 8s; }
/* définition des étapes */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  8.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.67% {
    opacity: 0;
  }
}
/* ----------- */

2- tu supprimes le code JS, devenu inutile.

**jreaux62** · 04/11/2021, 21h55

Pour la TRANSLATION DES TITRES :

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
/* ----------- */
/* TRANSLATION  DES TITRES */
#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: 0s; }
#bgfade2 > div h1 { animation-delay: 4s; }
#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%;
  }
}
/* ----------- */

**dhillig** · 05/11/2021, 07h35

Hello jreaux,
Plus rien ne fonctionne

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
92
/* --- Base of examples --- */
 
#bgfadewrap {
    width: 100vw; /* largeur fenêtre */
    height: 100vh; /* hauteur fenêtre */
	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;
	overflow: hidden;
	position: fixed;
	margin: 0px;
    width: 100vw; /* largeur fenêtre */
    height: 100vh; /* hauteur fenêtre */
}
 
#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;}
#bgfade1 > div h1 { animation-delay: 0s; }
#bgfade2 > div h1 { animation-delay: 4s; }
#bgfade3 > div h1 { animation-delay: 8s; }
#bgfade1, #bgfade2, #bgfade3 {
  animation: fade-in-out 12s ease infinite 0s;
  opacity: 0;}
 
#bgfadewrap > div > div a {
	text-align: center;
	font-size: 140%;
	color: rgba(204,102,153,0.8);
	margin: 0 20%;
}
/* définition délai des images */
#bgfade1 { animation-delay: 0s; }
#bgfade2 { animation-delay: 4s; }
#bgfade3 { animation-delay: 8s; }
/* définition des étapes */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  8.33% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.67% {
    opacity: 0;
  }
}

ou

lapagetest.fr

J'ai bien regardé le tuto de NoSmoking, je ne vois pas ce qui cloche.
Bonne journée,
dh

**jreaux62** · 05/11/2021, 10h51

Bonjour,

c'est normal : tu as laissé le code JS :

Code js :

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
  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();
});

Il faut le SUPPRIMER, puisque devenu inutile.

**dhillig** · 05/11/2021, 11h33

Of course.
C'est TOPISSIME

Merci bcp.
J'ai d'autres questions sur cette même page mais je vais tenter de trouver par moi-même avec le code CSS.
Encore Bravo (et quel abruti fais-je

Bonne journée,
dh

Animation images fullscreen

Animation en CSS

Vue hybride

Discussions similaires

Partager

Partager