Apparition image de fond progressive (CSS)

Résolu

Utilisateur anonyme -
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

Afficher la suite

A voir également:

Animation css apparition progressive
Dp animation maker - Télécharger - Animation
Idée animation anniversaire adulte ✓ - Forum Loisirs / Divertissements
Retraite progressive 60 ans - Guide
Enlever le soulignement d'un lien css - Astuces et Solutions
Logiciel d animation 2d gratuit - Télécharger - Divers Web & Internet

2 réponses

Réponse 1 / 2

avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

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

avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

grnhyjnu

good!

Réponse 2 / 2

Utilisateur anonyme

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 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

Utilisateur anonyme

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

avion-f16 Messages postés 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

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 19256 Date d'inscription Statut Contributeur Dernière intervention 4 507

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

Comment centrer un tableau en html ?

Saut de lignes sans <br/>

Comment intègrer une bande horizontale en CSS

html Afficher/cacher une DIV sur clique <a>

div à 100% ne remplit pas toute la largeur??

[CSS] Mettre un objet au premier plan

Votre réponse

Discussions similaires