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

**dhillig** · 05/11/2021, 16h02

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 :

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

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
    /* 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"

Merci pour votre aide et bon week-end,
dh

**jreaux62** · 05/11/2021, 16h34

Ce n'est pourtant pas sorcier...
Il suffit d'être rigoureux :

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
/* ----------- */
/* TRANSLATION DES TITRES */
#bgfade1 > div h1, #bgfade3 > div h1 {
  margin:0;
  text-align:right !important; 
  animation: translate-from-right 12s ease infinite 0s;
  right: -100%;
}
#bgfade2 > div h1 {
  margin:0;
  text-align:left !important; 
  animation: translate-from-left 12s ease infinite 0s;
  left: -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-from-right {
  0%, 100% {
    right: -100%;
  }
  8.33% {
    right: 0;
  }
  33.33% {
    right: 0;
  }
  41.67% {
    right: -100%;
  }
}
@keyframes translate-from-left {
  0%, 100% {
    left: -100%;
  }
  8.33% {
    left: 0;
  }
  33.33% {
    left: 0;
  }
  41.67% {
    left: -100%;
  }
}
/* ----------- */

N.B. J'ai mis des noms d'animations explicites

:

translate-from-right
translate-from-left

**dhillig** · 05/11/2021, 16h53

RE-SO-LU

Ça na pas l'air, mais ça ma pris quelques heures pour un résultat non satisfaisant.
Je me remets lentement au CSS... je savais que je n'étais pas trop loin du but

Bon week-end jreaux62,
dh

Animation images fullscreen

Animation en CSS

Discussions similaires

Partager

Partager