• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie macht man so einen Splashscreen

M

MartinCa

Neues Mitglied
Hallo zusammen,

ich habe heute folgenden "Splashscreen" (also die Startseite mit dem Logo, die nach ca. 2 Sek. wieder "ausfaded") gefunden:
eyecandy retina-ready mobile template

Nun die Frage: Wie erstellt man so etwas? Ich bin einfach zu doof durch die Codierung zu schauen.
Ab Zeile 67 in der HTML:
Code: 
[TABLE="class: webkit-line-content"]
splash">[TR]
[TD="class: webkit-line-number"][/TD]
[TD]<img id="splash-bg" src="[URL="http://ritenv.com/templates/eyecandy/images/splash/splash.png"]images/splash/splash.png[/URL]" alt="splash image"/>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD]<img id="splash-title" src="[URL="http://ritenv.com/templates/eyecandy/images/splash/main.png"]images/splash/main.png[/URL]" alt="splash title" />[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD]</div>[/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD][/TD]
[/TR]
[TR]
[TD="class: webkit-line-number"][/TD]
[TD]<!-- end splash screen -->[/TD]
[/TR]
[/TABLE]



Die Formatierungen sind in der style.less (CSS) ab Zeile 269:
HTML: 
#splash {    background: @secondaryColor;    width: 100%;    height: 120%;    position: absolute;    top: 0;    left: 0;    z-index: 10000;
    #splash-content {        margin: 0 auto;    }
    img#splash-bg {        width: 100%;        height: 100%;        position: absolute;        opacity: 0.6;    }    img#splash-title,img#splash-footer {        position: absolute;     }    img#splash-title {        width: 141px;        top: 50%;        margin-top: -136px;        left: 50%;        margin-left: -70px;    }}



Nun die Frage: In welchem Teil der js-Dateien steht der entsprechende Java-Code? Wie macht man so etwas? Ich bin überfordert ... :)
 
Das ist an sich ganz einfach. Man legt ein Div über die Seite, das nach einigen Sekunden ausgeblendet oder aus dem DOM entfernt wird.
 
Das geht am einfachsten mit JQuery:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Fadeout-Beispiel</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="splash">
             <h1>Dieser Text wird innerhalb von 2000 ms ausgeblendet</h1>
        </div>
        <script>
            $(document).ready(function() {
                $('#splash').fadeOut(2000, function() {
                    // Animation complete.
                });
            });
        </script>
    </body>
</html>
 
Check. Das Ausfaden klappt wunderbar mit jQuery. :)
Aber ... ich hänge nun glaube ich noch etwas an dem CSS (ich weiß, eigentlich falsches Unterforum, aber ich glaub wegen dem muss man jetzt nicht noch ein neuen Thread eröffnen oder?).

Wieso wird das BG sowie das Logo jetzt nicht zentral dargestellt? Wobei der BG ja schon nicht im kompletten Fullscreen ist.
Unbenanntes Dokument

 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben