Changement de fond au survol - rendre l'effet plus fluide

Résolu
typiac Messages postés 93 Statut Membre -  
typiac Messages postés 93 Statut Membre -
Bonjour,

J'ai codé ce petit script qui me permet de changer le fond de mon body au survol de lien: 

if(lemsg == "back1") { 
document.body.style.background = "url(images/index.jpg) no-repeat"; 
} else { 
document.body.style.background = "url(images/index2.jpg) no-repeat";  
}}


Le problème est que l'animation est trop raide. Comment faire pour fluidifier les changements d'images (je pense à un abaissement et une augmentation progressive de l'opacité par exemple...)?


A voir également:

4 réponses

Réponse 1 / 4
Thorak83 Messages postés 1140 Statut Membre 156
 
Bonjour,

Je te conseil d'utiliser jquery
il y a des effet très sympa et pas compliquer à faire
https://openclassrooms.com/fr/courses

Cordialement
0
Réponse 2 / 4
typiac Messages postés 93 Statut Membre 1
 
Oui, ça je veux bien mais par exemple avec la fonction fadeto (), je ne vois pas comment l'insérer dans le cas présent!
0
Réponse 3 / 4
ElementW Messages postés 5690 Statut Contributeur 1 224
 
JQuery pour ce genre de chose c'est lourd!
L'exemple ici et l'article qui l'accompagne montrent que la propriété "transition" de CSS3 peut faire des transitions sur l'image de fond: 
body {
    -moz-transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

A ajouter au code CSS de la page. Le JS fonctionnera comme prévu, vu qu'on ne précise ici que de faire une transition de fondu linéaire de 0.5 seconde quand le fond change.
0
Réponse 4 / 4
typiac Messages postés 93 Statut Membre 1
 
Ahhhh, merci beaucoup, c'est exactement ça que je cherchais! Résolu!
0