11523 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changement synchro image et fond

Bonjour à tous !

Merci de venir lire mon sujet et tenter de m'aider pour commencer.

Je souhaiterais ajouter à mon site du dynamisme et de la joie de vivre. Pour cela je veux faire un script qui va changer la couleur d'une de mes images avec le fond d'écran (de la meme couleur), synchro et avec un fade (un fondu). Pour ce faire j'ai trouvé sur le net comment faire pour faire tourner des éléments et modifie le CSS. Par contre je n'ai rien trouvé de simple pour le faire avec un fade harmonieux. Voici les 2 sites :
http://www.developpez.net/forums/d351404/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/changement-d-image-automatique-timeout/
http://www.dynamicdrive.com/forums/showthread.php?58956-background-color-changes-automatically

En résumé : un changement de BG et d'image automatique, synchro et fluide.

Merci à vous !
Modifié par Philigane (30 Jun 2014 - 09:11)
as tu essayer d'ajouter une transition CSS ?
#autocolor{
	width: 1000px;
	height: 700px;
	padding: 0.75em 0.5em 0;
	text-align: center;
	border: 1px solid black;
	margin: 3em auto 0;
	font: bold 90% sans-serif;
  transition:0.5s;
}
Excuse moi je suis stupide j'avais pas essayé ton bout de code qui fonctionne merci. Pour l'image pense tu que le code est adaptable ou diffère réellement ?

EDIT : j'ai tenté ceci où ai-je faux :

(function(){
	var images = ['images/H1-M.png', 'images/H1-B.png', 'images/H1-S.png', 'images/H1-V.png', 'images/H1-G.png'],
	e2 = document.getElementById('h1').src,
	counter1 = -1,
	images_len = images.length;
	var hexacode = ['#deb887', '#66cdaa', '#e9967a', '#90ee90', '#c0c0c0'],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
		e2=images[counter1 = ++counter1 % images_len];
	}
	setInterval(auto, 2000);
})();


EDIT 2: codre remodifier mais l'image n'est pas affectée par la transition : 
(function(){
	var images = ["images/H1-M.png", "images/H1-B.png", "images/H1-S.png", "images/H1-V.png", "images/H1-G.png"],
	counter = -1,
	images_len = images.length;
	var hexacode = ['#deb887', '#66cdaa', '#e9967a', '#90ee90', '#c0c0c0'],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
		document.getElementById('h1').src = images[counter = ++counter % images_len];
	}
	setInterval(auto, 2000);
})();


EDIT 3 : Ok j'ai remarqué que c'étais impossible de réaliser une transition d'une image à l'autre avec un background-image ou via le SRC directement. Alors je cherche pour faire une transition via l'opacité
Modifié par Philigane (01 Jul 2014 - 21:45)
Sujet clos
Aller à