Intro overlay

[ViNyL]

Ik ben bezig met een intro overlay. Dit idee komt van http://www.the-impossible-project.com waar ze dit gebruiken als intro voor hun website (op dit moment een nieuwe, maar goed). Uit nieuwsgierigheid wilde ik weten hoe ze dit doen.

[offline]

In feite verstop je wrapper waar je site content in zit en laadt je een fullscreen foto die mee sized als je het venster groter en kleiner maakt.

Bij een site met praktisch geen inhoud werkt dit prima, alleen als het laden even duurt ontstaat er een probleem. Als het laden namelijk lang duurt dan zal eerst alle content geladen worden voordat het javascript uitgevoerd wordt. Hierdoor zie je dus eerst de site en vervolgens floept ineens die intro erover heen. Dat is vrij irritant (al kan een intro dat sowieso al zijn).

Ik heb de intro werken alleen ben benieuwd of het verstoppen van de site content op een betere manier kan.

Als iemand javascript uit heeft staan moet de site wel blijven werken, zonder dat je dus vastloopt op de intro. De intro op de bovengenoemde site blokkeert de website als je javascript uit hebt staan. Hoe kun je er nou voor zorgen (zonder vooraf style="display:none") de site content sneller weg te stoppen voor de overlay.

Ik heb al gekeken naar een optie om met javascript een cookie te zetten en deze met PHP op te halen. Als deze er niet is staat javascript uit. Ook dit kent hetzelfde probleem, want javascript zet de cookie pas als de content geladen is. Op dat moment zie je dus eerst de site weer voor de overlay er overheen komt.

Iemand een goed idee?

[ Voor 3% gewijzigd door ViNyL op 02-10-2012 20:53 ]

[TERW_DAN]

Waarom wil je het niet doen met display:none? Is dat niet snel genoeg? Ik zou het moeten testen, maar het lijkt me dat je op die manier snel genoeg de content verborgen hebt.

[ViNyL]

display:none is zeker snel genoeg, maar als je geen javascript aan hebt staan in je browser kun je het later niet weer wegpoetsen. Dan strand je dus op een intro scherm en krijg je de website nooit in beeld

[kaesve]

mogelijkheden die bij mij opkomen:

• een linkje in de intro zetten naar de echte pagina.
• gebruik maken van :target of :checked selectors icm een checkbox/anchor in je intro.

De eerste optie is het meest simpel naar mijn idee. De tweede voelt meer als een hack, maar heeft als voordeel dat je niet een nieuwe pageload nodig hebt en ook fancy css3 transitions kan gebruiken

[ViNyL]

Beide zijn inderdaad een optie.

Met :target zou je dus een pseudo klasse maken in je stylesheet om de display:none te overschrijven?

[TERW_DAN]

ViNyL schreef op zaterdag 15 september 2012 @ 22:15:
display:none is zeker snel genoeg, maar als je geen javascript aan hebt staan in je browser kun je het later niet weer wegpoetsen. Dan strand je dus op een intro scherm en krijg je de website nooit in beeld

Maar als je nu ook JS gebruikt om display none in te stellen op je div heb je dat probleem niet. Als je geen JS hebt, zal het element nooit verdwijnen.

[ViNyL]

Ik hide de content wrapper nu met JavaScript. Als je dat niet hebt zie je de intro dus nooit.

Heb je wel JavaScript dan wordt de content wrapper verstopt en de intro overlay geladen. Klik je op de intro dan verstop ik de intro en toon de content wrapper weer. Alles met JavaScript dus.

[8088]

ViNyL schreef op zaterdag 15 september 2012 @ 22:15:
display:none is zeker snel genoeg, maar als je geen javascript aan hebt staan in je browser kun je het later niet weer wegpoetsen. Dan strand je dus op een intro scherm en krijg je de website nooit in beeld

Dat hoeft toch niet?

HTML:

<style type="text/css">
    #intro_wrapper {
        display:none;
    }
    #wrapper {
        display:none;
    }
    <!-- enzovoorts -->
</style>

<noscript>
    <style type="text/css">
        #wrapper {
            display:block;
        }
    </style>
</noscript>

<script>
    $(document).ready(function()
    {   
        $("#intro_wrapper").show();
        // et cetera
    }
</script>

Dat is vrij irritant (al kan een intro dat sowieso al zijn).

Inderdaad.

[ViNyL]

Dat is een nice oplossing! Why didnt I think of that?

[R4gnax]

Simpelste oplossing is een extra classname 'js' op het documentElement (dwz. het <html> element) er bij te klussen met een JavaScript wat in de head staat (en blocking uitgevoerd wordt, voordat de body geparsed en getoond kan worden). Deze class kun je hierna gebruiken om je startup/intro overlay te tonen en de site te verbergen.

Zoiets dus:

HTML:

<html>
  <head>
     <style>
       .overlay { display : none; }
       html.js .site { display : none; }
       html.js .overlay { display : block; }
     </style>
     <script>
       document.documentElement.className += " js";
     </script>
  </head>
  <body>
    <div class="site">...</div>
    <div class="overlay">...</div>    
  </body>
</html>

Mocht je toevallig Modernizr gebruiken voor je project; die voegt al een classname 'js' voor je toe ...

[Bosmonster]

Het grote voordeel van die methode is echter dat je het doet VOOR dat je CSS is geladen. Moet je het er wel boven zetten, om de flashes te voorkomen (al zal dat met 3 regels inline niet zo veel uitmaken).

[ Voor 15% gewijzigd door Bosmonster op 17-09-2012 11:26 ]