Comment changer le fond d'un background-cover

**dhillig** · 24/11/2014, 22h09

bonsoir,
Sur certains sites avec un fond d'écran plein pot, en cliquant sur qq objets du site, le background change.
Qu'elles-sont les astuces pour y arriver ? Peut-on changer l'image du body ou est-ce encore une astuce JQuery.Js ?
Comment faire ? Les Background s'échangent avec un ralentissement qui n'est pas brutal (fondus ?).
Cet effet me semble très esthétique. Merci pour votre aide !
dhillig

**adiGuba** · 25/11/2014, 09h05

Salut,

Il y a plusieurs solutions.

1. Il y a les transitions CSS, qui permettent de définir une transition progressive d'un attribut.
Par exemple avec ceci :

Code css :

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

transition: background 2s linear;

Tu indiques que le changement de background devra se faire en 2 secondes, et de manière linéaire.

Si tu affectes une classe à l'élément qui change sa propriété background, le changement se fera progressivement.
Exemple : http://jsfiddle.net/jzfx44ah/

C'est assez bien supporté par les navigateurs modernes, même s'il est préférable d'utiliser les préfixes -webkit-, -moz- et -o- pour une meilleure compatibilité.

2. Il y a les animations CSS, qui permettent de définir des animations plus complexe (en définissant plusieurs étapes).
L'animation étant définie dans le CSS via un @keyframe, qui définit les différentes étapes de l'animation.

Exemple : http://jsfiddle.net/b8b17269/1/

C'est assez bien supporté aussi par les navigateurs modernes, mais là il faut impérativement utiliser le préfixes -webkit- pour tous les navigateurs basés sur WebKit (et -moz- et -o- pour les navigateurs plus anciens).

3. Il y a JQuery et d'autres frameworks JavaScript qui permettent de faire la même chose en JavaScript.
Selon les cas cela peut s'appuyer sur les animations CSS (plus performant) ou implémenter cela en JavaScript (meilleurs compatibilité), voir les deux.

4. Sinon il y a l'API Web Animation en JavaScript. Mais pour l'instant ce n'est supporté quasiment que par les dernières versions de Chrome.
Il existe toutefois un polyfill JavaScript...
Plus d'info : http://updates.html5rocks.com/2014/0...w-in-Chrome-36

a++

**dhillig** · 25/11/2014, 22h32

Bonsoir adiGuba,
Merci pour ta réponse plus que rapide :
Solution 1 : Parfait, mais que faut-il mettre pour une transition fondue (et non linéaire) ? Dsl, je suis novice en code

Et les préfixes, comment les changer ? Et ce prob de compatibilité ? Ces questions parce que , en qq lignes de code (si il n'y a pas de prob de compatibilité), la question est résolue !!!

Solution 2 : Comment peut-on changer les couleurs par des images ? Cela fontionnerait parfaitement pour un diaporama si cela était possible ? Et je suis fort intéressé par cela

Solution 3 : étant novice en code et nul en anglais, alors là, si tu a le pouvoir de me faire comprendre par je ne sais quelle magie ce que le mec explique (??)

BRAVO BRAVO ! Encore qq messages et tout sera résolu

Merci encore pour ton aide adiGuba,
Bonne soirée;
dhillig

**adiGuba** · 26/11/2014, 09h45

Envoyé par dhillig

Solution 1 : Parfait, mais que faut-il mettre pour une transition fondue (et non linéaire) ?

Que veux-tu dire exactement par "transition fondue" ?

Sinon tu as plusieurs fonctions de timing, comme ease, linear, ease-in, ease-out, ease-in-out.
Tout comme la fonction cubic-bezier(), mais je ne le maitrise pas du tout.

Envoyé par dhillig

Dsl, je suis novice en code

Et les préfixes, comment les changer ? Et ce prob de compatibilité ? Ces questions parce que , en qq lignes de code (si il n'y a pas de prob de compatibilité), la question est résolue !!!

C'est supporté par les navigateurs récents, comme IE 10, Firefox 16, Chrome 26, Safari 6.1, Opera 12.1 : http://caniuse.com/#feat=css-transitions

Mais certains navigateurs avait déjà commencé à implémenter cela bien avant, mais il faut utiliser le préfixe du navigateur.
Cela consiste simplement à dupliquer la propriété avec le préfixe des navigateurs :

Code :

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

1
2
3
4
    -o-transition: background 2s linear;
    -moz-transition: background 2s linear;
    -webkit-transition: background 2s linear;
    transition: background 2s linear;

Là tu obtiens une compatibilité avec des navigateurs plus anciens : Firefox 4, Chrome 4, Safari 3.1, Opera 10.5

Envoyé par dhillig

Solution 2 : Comment peut-on changer les couleurs par des images ? Cela fontionnerait parfaitement pour un diaporama si cela était possible ? Et je suis fort intéressé par cela

Cela ne marche pas directement avec des images.

Par contre tu peux jouer sur l'opacité des images (par exemple en les positionnant toute au même endroit les unes au dessus des autres, et en modifiant leurs opacités).

Envoyé par dhillig

Solution 3 : étant novice en code et nul en anglais, alors là, si tu a le pouvoir de me faire comprendre par je ne sais quelle magie ce que le mec explique (??)

Ben... c'est la même chose mais en JavaScript...
Si tu est novice en JavaScript il vaut mieux te tourner vers des tutoriels avant de s'y attaquer.

a++

**dhillig** · 26/11/2014, 21h09

Slt adiGuba,
Le fondu ??? C'est exactement ce que tu décris dans ta réponse 2 "Par contre tu peux jouer sur l'opacité des images (par exemple en les positionnant toute au même endroit les unes au dessus des autres, et en modifiant leurs opacités)" Que l'image 1 devienne transparente afin de rendre visible petit à petit l'image 2 etc...
Cela est-il compatible avec ta première solution (page avec boutons) ? Si oui comment ?

"Par contre tu peux jouer sur l'opacité des images (par exemple en les positionnant toute au même endroit les unes au dessus des autres, et en modifiant leurs opacités)"
Cela m'éviterait le genre de code suivant ?

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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span {
	background-image: url(../images/2.jpg);
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 4s;
}
.cb-slideshow li:nth-child(3) span {
	background-image: url(../images/3.jpg);
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 8s;
}
.cb-slideshow li:nth-child(4) span {
	background-image: url(../images/4.jpg);
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 12s;
}
.cb-slideshow li:nth-child(5) span {
	background-image: url(../images/5.jpg);
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 16s;
}
.cb-slideshow li:nth-child(6) span {
	background-image: url(../images/6.jpg);
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 20s;
}
.cb-slideshow li:nth-child(2) div {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 4s;
}
.cb-slideshow li:nth-child(3) div {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 8s;
}
.cb-slideshow li:nth-child(4) div {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 12s;
}
.cb-slideshow li:nth-child(5) div {
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 16s;
}
.cb-slideshow li:nth-child(6) div {
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 20s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

Si tel est le cas, je ne vois pas non plus comment faire

Merci pour toutes tes explications (et tes liens)

Bonne soirée,
dhillig

**dhillig** · 30/11/2014, 15h33

Bonjour à adiGuba et aux autres,
L'effet désiré est "fade" ("fade in" "fade out") me semble t'il.
A part cela, j'ai presque réussi grâce à la première réponse à obtenir ce que je désirais. J'avais cette page en tête :
http://www.simon-k.com/comet/
Bonne fin de week-end
dhillig

**dhillig** · 03/12/2014, 20h49

Encore Bravo adiGuba !
Merci et bonne soirée (et dsl d'être si embêtant

)
dh

Comment changer le fond d'un background-cover

CSS

Discussions similaires

Partager

Partager