Changement d'image du background en fade

**ParisElliot** · 06/05/2015, 22h03

Bonsoir à tous,

Après recherches, je ne trouve pas la solution. Je cherche à changer faire que mon background change d'image en fade.
Vous pouvez retrouver exactement ce que je veux sur l'écran de connexion sur le site de twitter : www.twitter.com

Merci d'avance à ceux qui m'aideront !

PS: La solution est peut être en JQuery.

**CCyrillus** · 06/05/2015, 23h53

Bonsoir,

voici une demo avec des pseudo element superposant des images (fonds) qui passent de l'un a l'autre avec un fondu avec une transition sur opacity.
http://codepen.io/gcyrillus/pen/DJdja

**ParisElliot** · 07/05/2015, 12h08

Bonjour et avant tout merci de ton aide.

J'ai essayé cette solution avant de poster ici mais elle ne marche pas sous Chrome... Alors que avec firefox il n'y a aucun soucis.

**Bovino** · 07/05/2015, 14h10

Ca fonctionne très bien sur Chrome.

Tu es sûr d'avoir une version à jour ?

**ParisElliot** · 07/05/2015, 14h28

Alors la c'est une énigme...

J'ai la dernière version de Chrome oui.
Je copie/colle le code de codepen, il marche sur Firefox mais pas sur Chrome ni sur Safari...

**Bovino** · 07/05/2015, 14h44

Ben copie colle plutôt le lien du pen dans Chrome et sauf complot des Illuminatis, ça fonctionne.

**ParisElliot** · 07/05/2015, 14h46

Ce que j'ai fais.

Mais aillant besoin de ce code, il faut bien que je crée moi même un CSS et un index. Et dans ce cas, ça ne marche pas...

**Bovino** · 07/05/2015, 14h52

Ben oui, mais nous, pour le moment, tout ce qu'on a, c'est un code d'exemple qui fonctionne, ça rend assez difficile d'essayer de savoir pourquoi ce n'est pas le cas du tiens.

**ParisElliot** · 07/05/2015, 14h57

Je suis bien d'accord

Voici mon code :

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="css/style.css">
	<link rel="icon" type="image/png" href="img/logo.ico"/>
 
</head>
<body>
 
	<div id="page">
  		<p>Welcome</p> 
	</div>
 
</body>
</html>

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
 
html, body
{
    width: 100%;
    height: 100%;
background-image: url("http://www.hd-wallpaper.images-fonds.com/modules/mg3/albums/Art_Digital_Wallpaper_HD/Abstract/Abstract_wallpaper_HD_0029.jpg");  
  background-size: cover;
    animation: changeBackground 10s infinite;
  position:relative;
  z-index:0;
  display:table;
}
body {
  display:table-cell;
  vertical-align:middle;
  position:static;
}
body:before, body:after {
  content:'';
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  z-index:1;
    background-size: cover;
  animation:bgfade 10s infinite;
  animation-direction: alternate;
  opacity:1;
}
#page {
  position:relative;
  z-index:2000;
  width:70%;
  min-width:960px;
  max-width:1020px;
  min-height:50%;
  margin:auto;
  background:rgba(0,0,0,0.65);
  padding:1em;
  border-radius:1em;
  box-shadow:0 0 5px white;
  color:white;
}
body:before {
    background-image: url("http://braindegeek.com/wp-content/uploads/2013/05/hd-wallpapers-3.jpg");
 animation-direction: alternate-reverse;
}
body:after {
           background-image: url("http://hdw.datawallpaper.com/abstract/spring-background-desktop-background-498467.jpg"); 
}
@keyframes bgfade {
  50%  {opacity:0;z-index:100;}
  100%  {opacity:1;z-index:0;}
}
p {
  color:gold;
}

**Bovino** · 07/05/2015, 15h14

J'ai appliqué ta technique (copier coller le code de ton précédent message) et ça donne ça : http://dmouronval.developpez.com/fade.html.

Je crois que l'hypothèse des Illuminatis reste une option

**ParisElliot** · 07/05/2015, 15h18

Vu ton message, ça doit marcher. Je dis ça parce que chez moi non

!

Une idée d'ou cela peut venir ? (ou pas justement...)

**Bovino** · 07/05/2015, 15h36

Peut-être d'une version obsolète de Chrome.

Dans ce cas, je te conseille d'essayer en incluant les versions préfixées pour les animations.

**ParisElliot** · 07/05/2015, 16h01

D'accord. J'ai la version 42.0.2311.135.

J'ai essayé en ajoutant simplement -webkit- devant les 4 animations, ça ne marche pas :/

**Bovino** · 07/05/2015, 16h07

Ca ne suffit pas : http://css.developpez.com/tutoriels/...mations#LVII-C.

**ParisElliot** · 07/05/2015, 16h08

Je poste ici une seconde solution que je viens de trouver :

http://www.css-jquery-design.com/201...in-out-effect/

J'espère quand même pouvoir résoudre ce problème... Ahaha

Invité · 07/05/2015, 21h16

Bonjour,
j'ai vu et testé ton lien : ce qui me gène c'est que l'image est déformée quand on redimensionne la fenêtre.

J'ai donc écrit mon propre code : http://codepen.io/jreaux62/pen/aOvemE

Code html :

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

1
2
3
4
5
<div id="bgfadewrap">
  <div id="bgfade1"></div>
  <div id="bgfade2"></div>
  <div id="bgfade3"></div>
</div>

1/ Les images sont mises en background de <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
#bgfadewrap, #bgfadewrap > div {
	z-index:-1;
	top:0; left:0; bottom:0; right:0; 
	width:100%; height:100%;
}
#bgfadewrap {
	position:fixed;
	background:#000;
}
#bgfadewrap > div {
	position:absolute;
	background-size:cover;
	display:none;
}
#bgfade1 {
  background-image:url('http://res1.windows.microsoft.com/resbox/en/windows/main/3245d978-ad9e-4cb2-be29-3332206fecce_5.jpg');
}
#bgfade2 {
  background-image:url('http://res2.windows.microsoft.com/resbox/en/windows/main/de1927c3-06a3-4ea1-b699-dbdaae3e5d32_5.jpg');
}
#bgfade3 {
  background-image:url('http://res1.windows.microsoft.com/resbox/en/windows/main/9ce62f36-1ed9-48dc-a417-ab6cab263d46_5.jpg');
}

2/ background-size:cover; : les images couvrent toute la zone.

Code javascript :

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
var bgfade = '#bgfadewrap'; // variable globale
function background_init() {
  $(bgfade).css({'height':$(window).height()+'px','width':$(window).width()+'px'});
}
function background_anim() {
    $(bgfade+' div').first().appendTo(bgfade).fadeOut(2000);
    $(bgfade+' div').first().fadeIn(2000);
    setTimeout(background_anim, 10000); // 10 secondes
}
$(window).on('load', function(){
  $(bgfade+' div').hide();
  background_init();
  background_anim();
});
$(window).on('resize', function(){
  background_init();
});

3/ le jQuery s'occupe de l'animation + effet "responsive".

N.B. On n'oublie pas d'initialiser jQuery :

Code html :

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

**ParisElliot** · 08/05/2015, 13h25

Merci beaucoup !

Mais je dois avoir un souci, les background ne s'affichent pas... C'est noir.

Invité · 08/05/2015, 15h41

Il faut le fichier d initialisation jQuery

**ParisElliot** · 08/05/2015, 17h38

Evidemment je l'ai...

Changement d'image du background en fade

CSS

Discussions similaires

Partager

Partager