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 -
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:
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...)?
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...)?
4 réponses
-
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 -
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!
-
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. -
Ahhhh, merci beaucoup, c'est exactement ça que je cherchais! Résolu!
