Discussion :

[moonstone]

bonjour , je sais pas si c'est exactement la bonne catégorie pour ce post au cas ou sa ne le serait pas veuillez m'excuser.

Si vous regardez la page home de grosbill.com on peux apprecier une rotation du background avec une transition en fade in , fade out.

j'ai donc trouvé quelques chose de similaire et tres leger a intergrer dans code qui a pour fonction de remplacer a intervale l'image de fond css de mon body de ma page home
http://stackoverflow.com/questions/7...f-body-by-time

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<script>
bgArr = ['slider/fond1.jpg', 'slider/fond2.jpg', 'slider/fond3.jpg', 'slider/fond4.jpg', 'slider/fond5.jpg', 'slider/fond6.jpg', 'slider/fond7.jpg', 'slider/fond8.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
    if (bgCur == bgArr.length) bgCur = 0;
    document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 10000);
</script>

mais je n'ai aucune idée de comment ajouter dans ce code une transition de fondu entre les photos de type fade in fade out.

Si un wizzard a un tips ou une alternative je suis preneur.

merci et bonne journée

[Invité]

Bonjour,
sur le site que tu donnes en exemple, il s'agit, non pas du body, mais d'un simple slideshow (jQuery) dans un div en position:absolute;

[moonstone]

Bonjour jreaux6,
Tu as surement raison ,la technlogie n'est pas la meme , j'essaye juste d'avoir un effet similaire cad un fond qui change avec une transition en fondu ainsi qu'une facile integration dans mon code.

l'integration dans le code ne posse pas de soucis néanmoins je sèche en ce qui concerne la transition et si meme si c'est possible ou pas (.blur? ou .focus?)

encore merci

[SpaceFrog]

il n'est pas à ma connaissance possible de faire de rotation du background directement...

[moonstone]

La rotation du background-image de la class body dans mon css ne pose aucun probleme, sa tourne tres bien. Ce bout de script est parfaitement operationel et sans charger aucun librairie jquery mais il lui manque juste un effet de transition pour que ce soit plus pro.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

body{background-image:url(images/background.jpg);background-position:top center;background-repeat:no-repeat;padding-top:15px;}

[SpaceFrog]

je ne vois pas de rotation ???

tu ne parles visiblement pas de trigonométrie ...
tu parles de séquence en boucle ...

Non on ne peux pas fair d'effet de fade ou de transition sur le background en css il faut passer par une image ou un div ou autre conteneur d'image

[moonstone]

Exact c'est une boucle , un slide sans fin.
Désolé Mes mots ne sont pas trés précis et pertinent , grace a vous j'y vois plus clair , je vais tester de nouveaux les autres alternatives.

Merci encore pour votre intérêt

[Difré91]

Je pense qu'une solution simple serait d'intégrer ton fade in fade out dans une image animée.
En gros, à la place de mettre ton image de gros lapin rose tout droit et ton image de gros lapin rose penchée, tu met une image animée de gros lapin rose qui fade out fad in tout droit et une image animée de gros lapin rose qui fade out fade in penchée.