11540 sujets

JavaScript, DOM et API Web HTML5

Probleme Slideshow fadeIn fadeOut

Bonjour à tous,

Voila je souhaite créer dans ma page une bandeau slideshow en fond fixe avec paralaxe.
Comme dans cet exemple les bandeau de photos http://www.fifteen.net/


J'ai reussi à intégrer ces bandeau et a créer un petit slideshow mais le probleme c'est la transition entre les image qui ne se fait pas de façon gracieuse on à une premiere image un fondu sur du noir et ensuite seulement l'image suivante. Entre 2 passage complet du slidshow on à encore un fond noir encore plus long.

Je suis vraiment tres nulle en javascript si quelqu'un pouvais m'aider ca serai super!

Voici mon script :

<script src='jquery-1.10.2.min.js' type='text/javascript'></script>
<script>$(function(){
   var images = [
       'images/PhotosHD/5.jpg',
       'images/PhotosHD/6.jpg',
	   'images/PhotosHD/7.jpg',
	   'images/PhotosHD/8.jpg',
	   
   ],
   loop = 0,
   $home = $('#banner-wrapper3');

   (function fader(){
        $home
        .fadeOut('fast', function(){
            $home.css('background', 'url(' + images[loop] + ') center center no-repeat fixed');
			$home.css('background-size', 'cover');
            $home.fadeIn('slow', function(){
                 setTimeout(fader, 7000);
            });
        });

        if(loop < images.length-1) 
           loop++;
        else loop = 0;                
    })();         
});
</script>

et mon html :

<div id="banner-wrapper3" class="bk bk_0 " style="position: relative;z-index: 1;height: 22em;  background-size:cover; background-position:center;"> </div>



Merci d'avance Smiley biggrin
Si tu regarde la doc de la méthode fadeOut() :

.fadeOut( [duration ] [, complete ] )

duration (default: 400)
Type: Number or String
A string or number determining how long the animation will run.

complete
Type: Function()
A function to call once the animation is complete. (Une fonction à appeler une fois l'animation terminée)

Il faut que tu appelle la méthode fadeIn() non pas en callback (la fonction en 2ème argument) mais après celle-ci. Elles seront ainsi exécuté en même temps, ca doit ressembler à ca :

home.fadeOut()
home.fadeIn();

Tu va probablement devoir faire des ajustements CSS car les 2 images seront visible en même temps (positionne les en absolute).
Le problème est que tu anime la meme div, elle ne peut pas à la fois apparaitre et disparaitre. De plus tu changes son background au moment ou elle est invisible, ce qui crée l'illusion du slideshow.

Ce qu'il faut faire c'est animer 2 div superposées qui ont en background l'image que tu souhaites.

Voici la solution : http://jsfiddle.net/Jiho/jw2h4/

Les images sont ajoutées en javascript en fonction du contenu de la variable image, ce qui n'est pas optimal car la loop démarre avant que les images soient chargées. En fait, ce n'est pas réellement un problème car ce sont des background CSS et dans ce cas la méthode ready() (en abrégé dans ton script, sous la forme "$(function(){}") ne garanti pas que les ressources CSS soient disponibles au moment où le DOM est prêt. Il vaut mieux utiliser $(window).load().

Le meilleur est encore d'utiliser des balises img et un plugin de tel que Lazy Load pour charger les images en ajax. C'est utile si tu as plusieurs images de grandes tailles car sinon l'événement "onload" va mettre longtemps à se déclencher.

Un dernier conseil si tu utilise jQuery, construits ton code sous forme de plugin, ca t'aidera à le structurer. Regarde sur jqueryboilerplate.com si tu cherche un template de départ.
Sujet clos
Aller à