Un background qui glisse horizontalement au click

bonjour, je dois changer le background de ma page en javascript (de couleur unie) simplement au click
la difficulté est que mon background doit glisser horizontalement suivi par celui qui le remplace (couleur differente) ça doit tourner sur 3 couleurs de fond. quelqu'un a une astuce ?
je bloque depuis lundi

merci pour toutes suggestions apportées

si mes explications ne sont pas claires je suis connecté pour apporter des precisions
Modifié par lazhar (30 Jan 2013 - 12:01)

Salut,
Est que tu peux montrer ton code html et css ?

++++

Salut,
Est que tu peux montrer ton code html et css ?

++++

merci, je debute sois indulgent avec mon code



<style>


.image_click_clicked
{
-webkit-transition-duration: 500ms;
-webkit-transform: scale(1.5);
}

#slideshow {
document.body.style.backgroundColor="red"
}
#sContent li {
display: inline;
}
#sContent {
position: absolute;
top: 0;
left: 0;
width: 5220px;
margin: 0;
padding: 0;


/*CSS3 webkit keyframes animation*/
-webkit-animation-name: AutoSlide;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;

/*CSS3 moz keyframes animation*/
-moz-animation-name: AutoSlide;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;

/*CSS3 W3C keyframes animation*/
animation-name: AutoSlide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;


}
@-webkit-keyframes AutoSlide {
0% {
left: 0px; /*1ère image*/
}
15% {
left: 0px; /*idem pour attente*/
}
25% {
left: -305px; /*2ème image*/
}
40% {
left: -305px; /*2ème image*/
}
50% {
left: -610px; /*idem pour attente*/
}
65% {
left: -610px; /*3ème image*/
}
75% {
left: -915px; /*3ème image*/
}
90% {
left: -915px; /*idem pour attente*/
}
100% {
left: 0px; /*1ère image*/
}
}

}

}
</style>
</head>

<div id="slideshow" style=" float:left;border-width: 0px; border-style: solid;">
<ul id="sContent"><li>
<li>
<img src="image/rouge.png" class="image_click" onclick="this.className='image_click_clicked';"></li>
<ul id="sContent"><li>
<li>
<img src="image/vert.png" class="image_click" onclick="this.className='image_click_clicked';"></li>
<ul id="sContent"><li>
<li>
<img src="image/bleuciel.png" class="image_click" onclick="this.className='image_click_clicked';"></li>
<ul id="sContent"><li>
</ul></div>

</body>

Salut,
pour les couleurs de fond je ne sais pas si il est possible de faire glisser d'une couleur à une autre.. ( changement directement d'un fond à l autre oui , mais la transition je pense pas).

Pour des images, j'avais vu ca : http://www.menucool.com/slider/javascript-image-slider-demo2 ( mais je ne m'en suis jamais servi ...)

Bonne journée


Édit : oups des réponses en plus le temps que je retrouve mon login ..
Modifié par mathieu1004 (30 Jan 2013 - 15:01)

mathieu1004 a écrit :
Salut,
pour les couleurs de fond je ne sais pas si il est possible de faire glisser d'une couleur à une autre.. ( changement directement d'un fond à l autre oui , mais la transition je pense pas).

Pour des images, j'avais vu ca : http://www.menucool.com/slider/javascript-image-slider-demo2 ( mais je ne m'en suis jamais servi ...)

Bonne journée

je cherche depuis une semaine et mon boss me maintient que c'est possible et que je perds du temps....
Modifié par lazhar (30 Jan 2013 - 15:01)

Re salut,

Bon je m'avance peut être beaucoup, mais pour moi un background ne peut avoir qu'une seule couleur à la fois ...

background:black;

Mais pas plusieurs :

background:black,yellow;

ne marchera pas.

Pour moi, tu dois faire des images en background( même d'un pixel qui sont répété sur tout le background c pas gênant..) dont tu changeras les dimensions ensuite. Et pour le coup cela me semble plus simple car il est possible d'avoir plusieurs images en background, et donc de gérer un déplacement d'image.Pour cela :

 background:url() , url();

Te permet de mettre 2 images.

Je sais pas trop ce que tu essayes de faire ( des transitions ou animations en css3 j'ai l'impression), cela me fait un peu penser à ca : http://www.alsacreations.com/tuto/lire/1052-ID-slideshow-css3-target-animation-keyframes-introduction.html mais la aussi ils font des déplacement d'images.

Je te propose l'exemple suivant que j'ai fais à partir de cette page http://www.w3schools.com/css3/css3_animations.asp et de 2 images de petites tailles prises sur google.
( ca permet de tester a la volée dans les pages d'essais , c'est assez pratique je trouve)
J'ai décaler la 1ere image de 15px juste pour être sur que le fond gris était bien la...
J'ai utiliser une animation plus pour tester qu'autre chose , c'est un peu mal foutu je trouve, une fois que l'animation est fini cela revient sur la 1ere "image" ... et je saisi pas comment il transforme mes % dans background-size quand il y a 2 valeurs .. ( en gros le background-size:100% 100% bug .. ca fait pas du tout 100% de la hauteur dans l'animation..)

<!DOCTYPE html>
<html>
<head>
<style> 
body
{

background:url(http://apvonlineblog.files.wordpress.com/2011/10/1pixel.gif) no-repeat 15px 15px, url(http://wwwabi.snv.jussieu.fr/images/1pixel.gif)no-repeat ;
background-size: 100% ,100%;
animation:myfirst 2s;
}

@keyframes myfirst
{
0%   {background-size:100% 100%,100%; }
100% {background-size:0% 100% ,100%; }
}
}


</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

</body>
</html>

Bon c'est pas super, mais j'espère que ca t'aidera
Je n'ai pas essayé, mais je pense qu'il y a moyen de modifier les dimensions des images de background directement en javascript
Modifié par mathieu1004 (30 Jan 2013 - 17:48)

merci pour ta reponse et ton code, je ne cherche pas a superposer deux couleurs en même temps, mais lorsque je clique sur ma page la couleur glisse horizontalement et la couleur suivante suit pour la remplacer.

je vais tester ton code et voir ce que ça donne comme effet

merci encore

Non non j'ai bien saisi, pas 2 couleurs superposés, mais a un moment donné tu veux 2 couleurs unique et distinctes en meme temps dans le body, je pense pas que cela soit possible.. Il y a peut etre moyen de bidouillé en utilisant des gradients, mais normalement c'est pour des dégradés de couleurs, et si j'ai bien compris tu veux pas un dégradé de couleur, juste la couleur d'avant puis la nouvelle qui glisse sur le coté.

j'ai recuperé le code de cette animation http://www.menucool.com/slider/javascript-image-slider-demo1
j'ai remplacé les photos par mes couleurs de fond de page, je clique l'animation de transition se passe comme j'ai envie en plus d'autres animations
quand je vais lire la fonction javascript c'est une usine à gaz.....
Modifié par lazhar (30 Jan 2013 - 18:06)

re

Alors en bidouillant un peu les gradients ..

background: linear-gradient(to right, red 100%,yellow 0%);
background: linear-gradient(to right, red 75%,yellow 0%);
background: linear-gradient(to right, red 50%,yellow 0%);
background: linear-gradient(to right, red 25%,yellow 0%);
background: linear-gradient(to right, red 1%,yellow 0%);
background: yellow;

Si tu les tests l'un après l'autre tu va voir que cela se décale au fur et a mesure.
Le 0% permet de dire que l'on ne veux pas de fondu entre le rouge et le jaune ( ce qui ferait un dégradé orange sinon)
Si on met red 0% ca fais un vrai gradient .. du coup faut finir a 1% puis sur un yellow..
Par contre on ne peut pas faire des animations css avec des linear-gradient cela ne fonctionne pas .. ( ou du moins pas sur le firefox sur lequel je suis , histoire de ne pas trop m'avancer sur la compatibilité ^^)
Mais bon ca doit pouvoir se faire sans trop de problème en javascript avec un setinterval ou quelque chose comme ça.

Voila sans utilisation d'image, et en prenant soin de toujours finir ton script avec une vrai couleur de background, ça devrait changé d'un seul coup sur des navigateurs qui supporte pas le gradient je suppose ..

Bonne soirée


Edit : Alors pour l'autre lien la oublie , je viens de m'apercevoir qu'il y a un petit caddie en haut a droite .. du coup ca doit être payant , ce qui explique que je m'en suis jamais servie ^^
Modifié par mathieu1004 (30 Jan 2013 - 18:20)

merci Mathieu pour tes conseils, je teste ce matin ce que tu viens de me donner comme code

Sinon, des divs positionnés en absolu prenant toute la largeur d'une page et tu les fais agir comme un slider ordinaire.

Ensuite, si ton contenu n'est pas lui-même positionné, tu le met en relative avec un z-index plus élevé.

bonsoir, as tu un exemple de code stp pour y voir plus clair ?

merci pour ton aide

mathieu1004 a écrit :
Bon je m'avance peut être beaucoup, mais pour moi un background ne peut avoir qu'une seule couleur à la fois ...

On peut obtenir deux couleurs distinctes dans un background en jouant avec linear-gradient

rodolpheb a écrit :


On peut obtenir deux couleurs distinctes dans un background en jouant avec linear-gradient

j'ai essayé de bidouiller le linear gradient impossible de faire tourner la machine

Hop petit exemple avec les linear qui se met a jour via le javascript et un setInterval ..
( quand j arrive au bout j echange les couleurs et ca recommence .. )

<!DOCTYPE html>
<html>
<body>

<script>

var couleur_en_cours="red";
var prochaine_couleur="yellow";
var couleur_temp;
var i=100;

setInterval('mafonction()',50);

function mafonction()
{

document.body.style.background= 'linear-gradient(to right, '+couleur_en_cours+' '+i+'%,'+prochaine_couleur+' 0%)';
i=i-2;
if(i==0)
{
couleur_temp=couleur_en_cours;
couleur_en_cours=prochaine_couleur;
prochaine_couleur=couleur_temp;
i=100;
}
}



</script>

</body>
</html>

Après tu peux régler en modifiant le setInterval et le nombre de fois que tu décrémente i ... mais moi ca me donne envie de vomir ...

oups pourquoi envie de vomir ?? merci pour l'exemple

bah soit ca va doucement , ca rame pas mais je trouve un peu moche .. on dirait une barre de chargement un peu. Soit ca va trop vite , et pour le coup j'ai l'impression que ca a pas le temps de bien dessiné/séparé que déjà ca passe à coté au coup d'après. J'aime pas trop... Il y a peut être un bon ratio à trouver je ne sais pas.

Je sais pas si c'est claire ..
En gros si on baisse de 1% a chaque fois, si on le fait aller vite (setInterval('fct()',50) ca saute bizarrement aux yeux ..
Si on baisse de moins de 1% ( i-1/2 ou 1-1/3) ca met tres longtemps a aller d'un bout a l autre du coup ca fait bizarre aussi.
Enfin bon faut voir si un juste milieu ca va ou pas
Modifié par mathieu1004 (01 Feb 2013 - 13:18)