Fondu entre images de fond

Version imprimable

Bonjour,
je débute en JS et j’essaie de créer un script pour faire un diaporama automatique.

J'ai bien réussi à le créer sauf que maintenant j'aimerai faire un fondu sur entre chaque image.

Voici mon script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var num = 0; function diapHome(bloc) { if( num != 4 ) { num = num + 1; } else { num = 1; } document.getElementById(bloc).style.backgroundImage = "url(img/bgBandeau" + num + ".jpg)"; } /*function bkgFadeOut(){ $('#bandeau1').fadeOut(); } function bkgFadeIn(){ $('#bandeau1').fadeIn(); }*/ setInterval( function(){ diapHome("bandeau1") }, 10000 ); /*setInterval(function(){bkgFadeOut();}, 9900); setInterval(function(){bkgFadeIn();}, 10000);*/
Comme vous pouvez le constater, j'ai essayé une solution avec fadein/fadeout mais qui est moche (on voit le fond entre chaque image...).

Merci pour votre aide ! :)

02/01/2015, 17h06
lysandro

Bonjour,

En attendant mieux, une proposition 'à la main', i.e. sans jQuery :
- dans un container en 'position:relative', deux images en 'position :absolute' (donc deux images l'une sur l'autre)
- lors du démarrage du fading, la première image (le z-index le plus bas donc) reçoit l'url de la deuxième image, avec une 'opacity:1', la deuxième image reçoit l'url de l'image a afficher avec une 'opacity:0', la fonction de fading fait varier l'opacité des deux images de façon à ce qu'à la fin, la première image termine avec 'opacity:0' et la deuxième avec 'opacity:1'.

Tu devrais avoir un fondu d'une image sur l'autre.

CSS Image Opacity / Transparency : http://www.w3schools.com/css/css_image_transparency.asp

Salut,

Je suis d'accord avec la proposition de lysandro, Il faudrait utiliser 2 conteneurs. Ainsi, on ne voit jamais le fond. Un exemple en jquery:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div id="container">
    <img id='image2' />
    <img id="image1"/><!-- la 2ème image se met automatiquement au dessus de la première :) -->
</div>
<script src='jquery.js'></script>
<script>
var num = 1;
var intervalle = setInterval(function(){
        num++;
        if(num==5) num=1;
	$("img#image2").css("background-image", "url(img/bgBandeau" + num + ".jpg)");//background de l'image derrière
  	$("img#image1").fadeOut(1200, function(){
  		$(this)
  			.css("background-image", "url(img/bgBandeau" + num + ".jpg)") //quand la transition est terminée, on remet les images à l'état initial
  			.fadeIn(0);
  	});
}, 5000);
</script>

03/01/2015, 07h39
NoSmoking

Bonjour,
il existe Galerie avec effet de fondu.
03/01/2015, 17h55
francoisclb

Merci beaucoup pour vos réponses !