11496 sujets

JavaScript, DOM et API Web HTML5

Jquery - Réaliser un slideshow d'images en background avec transition

Bonjour à la communauté,

Je besoin de réaliser, dans le cadre d'un site d'une mairie, un bandeau qui prend toute la largeur de la page, avec une image de fond qui changerai automatiquement au bout de quelques secondes, et cela de manière gracieuse si possible.

Vu que les images sont en background j'ai tout de suite oublié les scripts de diaporama pourtant sympathique mais pas adapté, vu que ce sont en général des balises "li" qui défilent dans un container.

Je commence donc a faire un script en Jquery qui au bout de 3 secondes me change la valeur de mon "background-image". Mais la transition est brute et ca ne plait pas trop?

Ma demande serait donc si vous connaissez un manière de faire une transition entre un passage d'image en background, ou une technique afin de rendre cela plus jolie ?

Voilà merci à vous, bonne "soirée" || "journée"
Bonjour,

Merci pour ta réponse mais ce script correspond a des diaporama d'images, et non pas d'image en background d'un <div>.
3 idées comme ça :
- Utilisais un fadeOut sur tout le conteneur changé l'image puis faire un fadeIn. Seul problème c'est s'il y a du contenu dans le block...
- Superposé un 2ème conteneur sur lequel appliquer un effet pour la transition. Mais c'est moins facile à mettre en place.
- Faire 36 millions d'images avec une transparence différente Smiley biggol
Bonjour à tous,
Bonjour oblik35000,

Cela fait plusieurs semaines que je cherche ce genre de script sans jamais trouver de solution fiable.
La technique que tu utilises actuellement sans fondu m'intéresse beaucoup, serait-il possible de ce la procurer ?
Merci d'avance
Bonjour Sylvain,

Voici le script que j'utilise, avec une transition brutale :


var i = 1;
function Horloge() {

i = i +1;
if(i==4){i=1};
$('body').css("background","transparent url(img/"+ i + ".jpg) 50% 0 no-repeat ");

}

jQuery(document).ready(function() {

setInterval("Horloge()", 3000);

});


Pour jo_link_noir : l'idée d'utiliser un fadeOut fadeIn sur des div serait peut être une solution, mais tout le contenu disparaitrait au même moment... Smiley ohwell
Bonjour,

Ce serait tellement plus simple sans contenu ><.
Reste plus que la seconde solution :
Avec javascript créé un élément frère, modifier ça taille et le placer sous l'élément où tu veux une image de fond. Il ne reste plus qu'à faire un effet sur l'élément créé.

J'ai commencé à le faire et il marche sur firefox et konqueror. Pour les autre navigateur je sais pas, mais c'est déjà une base '^^.

function Horloge(element, i)
{
	$(element).fadeOut(1000, function(){
		$(this).css("backgroundColor", (i % 2) ? "red" : "green")
		.fadeIn(1000, function(){
			setTimeout(function(){Horloge(element, ++i)}, 3000);
		});
	});
}

$(document).ready(function(){
	var $text = $("#text");
	//on cré un nouveau div positionner sous #text
	var $element = $(document.createElement("div"))
	.css({
		width: $text.width()+"px",
		height: $text.height()+"px",
		position: "absolute",
		top: $text.css("top"),
		rigth: $text.css("rigth"),
		background: $text.css("background"),
		//pour placer dessous... (sinon il est dessus)
		zIndex: -1
	});
	$text.css("backgroundColor", "transparent").before($element);

	Horloge($element, 1);
});



div{width:100px;height:70px;}
#text{background-color:blue;}



<div id="text">Bloc de texte</div>
Salut jo_link_noir,

Le code que tu viens de faire (au passage, merci beaucoup) s'applique à un calque !
Peut-on l'appliquer à la balise <body>, ainsi l'arrière plan du site serait un diaporama et n'afficherait pas les ascenseurs du navigateur si l'image est trop grande.

ai-je été clair dans mon explication ?
Bonsoir, désolé de répondre si tard mais j'été un peu occupé c'est dernier jours.

Je suis pas sûr d'avoir tout comprit, mais je me lance quand même

Il faut modifier le css de $element pour qu'il ne dépasse pas du body (width:100%; heigth:100%; overflow:hidden ?) ainsi que top et rigth.
Et placer $element dans body : $("body").append($element).

Et je pense que c'est tout Smiley smile .
Oui merci beaucoup, je me suis basé sur tes explications.

J'ai utilisé le plugin jQuery Cycle Lite que j'ai appliqué sur un div en overflow:hidden, lui meme placé dans un div en position:absolue, avec un z-index:-1; pour se placer au fond et width:100% pour prendre toute la largeur de la page.

Cordialement,
Modifié par oblik35000 (14 Oct 2009 - 10:40)
Sujet clos
Aller à