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

Résolu/Fermé

typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 - 28 juin 2013 à 18:08
typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 - 29 juin 2013 à 00:53

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:

Changement de fond au survol - rendre l'effet plus fluide
Piratage facebook changer mot de passe - Guide
Changement d'écriture - Guide
Effet miroir word - Guide
Rendre un fichier moins volumineux - Guide
Changer de dns - Guide

4 réponses

Réponse 1 / 4

Thorak83 Messages postés 1051 Date d'inscription jeudi 20 juin 2013 Statut Membre Dernière intervention 22 décembre 2017 156
28 juin 2013 à 18:15

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

Réponse 2 / 4

typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 1
28 juin 2013 à 18:22

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!

Réponse 3 / 4

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
29 juin 2013 à 00:31

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.

Réponse 4 / 4

typiac Messages postés 92 Date d'inscription lundi 9 mai 2011 Statut Membre Dernière intervention 14 janvier 2015 1
29 juin 2013 à 00:53

Ahhhh, merci beaucoup, c'est exactement ça que je cherchais! Résolu!

Discussions similaires

Fond d'écran rogné et zoomé

Discussions similaires

Newsletters