[html][css][js]Div langzaam zichtbaar maken

Status
Niet open voor verdere reacties.
5

5blabla5

Gebruiker
Lid geworden
27 apr 2009
Berichten
485
Sinds kort ben ik bezig met een pagina preloader script, een aardig simpel scriptje dat eerst de inhoud van een div laad, waar een andere div overheen is geplaatst, en dan de bovenste div laat verdwijnen en de onderste laat verschijnen.

Nu wil ik het zo hebben dat dit langzaam gebeurt, bijvoorbeeld eerst 10 procent zichtbaar, dan 20, dan 30, enz, tot en met 100 procent zichtbaar! Ik heb dingen waarmee je de style van een div kunt veranderen geprobeerd, zonder succes... Verder heb ik ook al aardig veel gezocht op google.

Dit is het script:

HTML: 
<html>
<head>

<script language="JavaScript">
<!--
function loadPageComplete() {

hidepage.style.visibility="hidden"
preloadcontent.style.visibility="visible"
}
// -->
</script>

</head>

<body onLoad="loadPageComplete()">


<div id="hidepage" style="visibility: visible; position: absolute; left:5px; top:5px; background-color: #FFFFFF; layer-background-color: #FFFFCC; height: 100%; width: 100%;"> <!-- div die laat zien dat de andere div laad -->

<center><div style="margin-top: 100px;">
<center><img src="http://apathtohealing.biz/Map1/map_loadbar.gif" alt="loading" /><br />
Deze pagina is aan het laden...</center>
</div></center>


</div> 


<div id="preloadcontent" style="visibility: hidden;"> <!-- Div dat moet laden -->

<img src="http://slechtvoorbeeld.yufra.nl/logo.bmp" alt="HOI!" style="height: 100%; width: 100%;" />

</div>


</body>
</html>

Een duwtje in de rug is dus welkom: Alvast bedankt! :thumb:
 
Al eens gekeken naar opacity? Dat kan je dan aanpassen met Javascript:
HTML: 
<div id="bla" style="background-color:red;opacity:0.1;">hoi</div>
<input type="button" onClick="document.getElementById('bla').style.opacity=1">
In dit voorbeeld (werkt in FF) wordt het ineens veranderd, maar je kan het natuurlijk ook in stappen doen.

[edit]Hier doen ze iets soortgelijks als wat jij wilt.[/edit]
 
Laatst bewerkt:
HTML: 
<!doctype html>

<html lang='en'>


   <head>

      <meta charset='UTF-8' />

      <title>test</title>

   </head>


   <body style='opacity: 0'>


      <img src='http://colorvisiontesting.com/Demo%20no.%2016.jpg' alt='test' onload='startFadingIn();' />


      <script>

         var t = null;

         function startFadingIn()
         {
            t = setInterval(function()
            {
               if(parseFloat(document.body.style.opacity) < 1)
               {
                  document.body.style.opacity = parseFloat(document.body.style.opacity) + 0.1;
               }else{
                  clearInterval(t);
               }
            }, 100);
         }

      </script>


   </body>

</html>
Zie een demo hier. Spreekt voor zichzelf. Werkt met opacity, dus voor IE en andere crappy browsers moet je eventjes de code een beetje aanpassen.
 
Laatst bewerkt:
Ik dacht al dat het iets met opacity was! Bedankt! Ik ga het uitproberen :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan