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

Résolu
typiac Messages postés 92 Date d'inscription   Statut Membre Dernière intervention   -  
typiac Messages postés 92 Date d'inscription   Statut Membre Dernière intervention   -
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 1051 Date d'inscription   Statut Membre Dernière intervention   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 92 Date d'inscription   Statut Membre Dernière intervention   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 4814 Date d'inscription   Statut Contributeur Dernière intervention   1 223
 
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 92 Date d'inscription   Statut Membre Dernière intervention   1
 
Ahhhh, merci beaucoup, c'est exactement ça que je cherchais! Résolu!
0