Apparition image de fond progressive (CSS)

[Résolu/Fermé]
Signaler
Messages postés
1096
Date d'inscription
lundi 30 novembre 2009
Statut
Membre
Dernière intervention
19 août 2020
-
 grnhyjnu -
Bonjour,

connaitriez vous un moyen de faire apparaitre l'image de fond
de manière progressive (comme un effet de fondu). Je developpe un site en XHTML et CSS (dans se cas se sera pour du CSS)
merci

2 réponses

Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Salut,

Essaye en créant une div en-dessous de tout le contenu faisant la même taille que la zone de rendu du navigateur. Cette div doit être invisible (opacité) grâce au CSS.
Ensuite, grâce à du Javascript (tu peux t'aider avec jQuery), au chargement de la page, il suffit de modifier l'opacité en faisant une animation.
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
1096
Date d'inscription
lundi 30 novembre 2009
Statut
Membre
Dernière intervention
19 août 2020
111
merci, il faut donc utilisé java en toute circonstance. Je vais essayer sa.
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Pas Java, mais Javascript.
Ce sont deux langages différents.
Utilise JS comme abréviation.
Messages postés
1096
Date d'inscription
lundi 30 novembre 2009
Statut
Membre
Dernière intervention
19 août 2020
111
j'ai réussi a coder en javacript pour faire apparaître le fond d'écran en fondu.
A présent je voudrais que se soit un second élement (image.gif) sur se fond d'écran qui appairasse lui aussi en fondu après que le fond d'écran soit complément apparue. Le seul soucis, c'est que lorsque je met le second code pour l'image(.gif) le fond d'écran n'apparaît plus en fondu mais seul le second élément !!
Voici mon code : (c'est dans mon fichier hmtl)

<img id="spaffySpecial" src="images/foret.jpg" width=991 height=700 style="-moz-opacity:0;filter:alpha(opacity=0)">
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("spaffySpecial");

function fadePic(){
if (opacite<max && up){opacite+=2;}
if (opacite>min && !up){opacite-=2;}


IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("spaffySpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)

</script>

<img id="eauSpecial" src="images/eaub.gif" width=991 height=700 style="-moz-opacity:0;filter:alpha(opacity=0)">
<script>
var max = 100;
var min = 0;
var opacite=min;
up=true;
var IsIE=!!document.all;
var ThePic=document.getElementById("eauSpecial");

function fadePic(){
if (opacite<max && up){opacite+=1;}
if (opacite>min && !up){opacite-=1;}


IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("eauSpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)

</script>


Merci !
Répondr
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Les variables du premier script sont écrasées par celles du second.
Renommes-les en ajoutant un "2" après chaque variable dans le second script, pareil pour la fonction.
Messages postés
1096
Date d'inscription
lundi 30 novembre 2009
Statut
Membre
Dernière intervention
19 août 2020
111
Je fais sa mais sa ne fonctionne pas..

<img id="eauSpecial" src="images/eaub.gif" width=991 height=700 style="-moz-opacity:0;filter:alpha(opacity=0)">
<script>
var (2) max = 100;
var (2)min = 0;
var (2) opacite=min;
up=true;
var (2) IsIE=!!document.all;
var (2) ThePic=document.getElementById("eauSpecial");

function fadePic(){
if (opacite<max && up){opacite+=1;}
if (opacite>min && !up){opacite-=1;}


IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("eauSpecial").style.opacity=opacite/100;
document.getElementById('result').value=opacite+"%"
}
setInterval(function(){fadePic();},100)

</script>
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Tu inventes des syntaxes ? :)

Je me répète :
« en ajoutant un "2" après chaque variable »
Et dans le nom, évidemment.

<img id="eauSpecial" src="images/eaub.gif" width="991" height="700" style="-moz-opacity:0;filter:alpha(opacity=0)" />

<script type="text/javascript">
var opacite2 = min;
var ThePic2 = document.getElementById("eauSpecial");

function fadePic2 () {
    // Increase/Decrease opacity variable
    if (opacite2 < max && up) { opacite2 += 1; }
    if (opacite2 > min && !up) { opacite2 -= 1; }

    // Set opacity
    IsIE ?
        ThePic2.filters[0].opacity = opacite2
    :
        ThePic2.style.opacity = opacite2 / 100;
}

// Execute fadePic2() function each 0.1 second
setInterval(function(){
    fadePic2();
},100);
</script>
Je n'ai pas testé avant.
Messages postés
1096
Date d'inscription
lundi 30 novembre 2009
Statut
Membre
Dernière intervention
19 août 2020
111
c'est bon, après quelques petites erreurs !
Merci Avion-f16
Et pour commencer a la faire apparaitre 2 ou 3 secondes après l'ouverture de la page, c'est possible ?
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 317
Remplace setInterval par setTimeout et 100 par 3000, et à la fin de la fonction fadePic2, ajoute :
    setTimeout(function() {
        fadePic2();
    }, 100);
}
(le dernier } est déjà présent)