Apparition image de fond progressive (CSS)

Résolu/Fermé

Utilisateur anonyme - 2 mai 2011 à 21:04
grnhyjnu - 30 juil. 2020 à 15:19

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

A voir également:

Animation css apparition progressive
Jeux animation soirée groupe 30 personnes - Forum Loisirs / Divertissements
Trait css ✓ - Forum CSS
Idée animation challenge centre d'appel - Forum Loisirs / Divertissements
Css lien non souligné - Astuces et Solutions
Css exposant ✓ - Forum CSS

2 réponses

Réponse 1 / 2

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
5 mai 2011 à 12:36

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.

Utilisateur anonyme
5 mai 2011 à 12:48

merci, il faut donc utilisé java en toute circonstance. Je vais essayer sa.

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
5 mai 2011 à 13:38

Pas Java, mais Javascript.
Ce sont deux langages différents.
Utilise JS comme abréviation.

grnhyjnu
Modifié le 30 juil. 2020 à 15:19

good!

Réponse 2 / 2

Utilisateur anonyme
8 mai 2011 à 20:12

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

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
8 mai 2011 à 20:52

Tu copies 2x le même script avec les mêmes variables, ça ne risque pas de fonctionner.

Utilisateur anonyme
8 mai 2011 à 21:05

comment dois-je faire alors ? J'ai pourtant changer l'id..

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
8 mai 2011 à 21:32

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.

Utilisateur anonyme
8 mai 2011 à 22:10

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>

avion-f16 Messages postés 19252 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 10 février 2025 4 505
Modifié par avion-f16 le 8/05/2011 à 22:19

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.

Discussions similaires

Minecraft, apparition de monstre

a quoi correspond le petit bonhomme affiché sur l'écran en haut

Recherche effet sonore

Apparition d'un petit bonhomme les bras écarté en bas de mon tel HUAWEI

Comment retirer petit bonhomme bras écartés sur Samsung Galaxy A20e

petit bonhomme sur android