Changement de fond au survol - rendre l'effet plus fluide [Résolu/Fermé]

Signaler
Messages postés
93
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
-
Messages postés
93
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
-
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...)?


4 réponses

Messages postés
1064
Date d'inscription
jeudi 20 juin 2013
Statut
Membre
Dernière intervention
22 décembre 2017
111
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
Messages postés
93
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
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!
Messages postés
4908
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
3 février 2020
1 001
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.
Messages postés
93
Date d'inscription
lundi 9 mai 2011
Statut
Membre
Dernière intervention
14 janvier 2015
1
Ahhhh, merci beaucoup, c'est exactement ça que je cherchais! Résolu!