Logo zum Start anzeigen, dann verblassen

**stevepa** · 20.11.2019, 17:23

Hallo zusammen,

wie schaffe ich es dass ich ein leere weiße Seite mit zentriertem Logo vorschalte, das vielleicht 1-2 Sekunden angezeigt wird, verblasst und somit die echte Startseite sichtbar wird?
Wie soll ich hier am besten ansetzen?

Vielen Dank und viele Grüße!

**mlweb** · 20.11.2019, 20:16

Spontane Idee wäre für mich die Eigenschaft opacity mit css animieren (@keyframe).

**stevepa** · 21.11.2019, 06:19

hallo,

habe jetzt eine einfache methode mit jquery gefunden, die genau das macht was ich will:

HTML-Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#test").fadeOut(2500);
});
</script>

jetzt wird hier das div element "test" genau so ausgeblendet wie gewünscht.

aber wo kann ich mein "div" element in contao hinterlegen so dass es über allem im vordergrund ist,
d.h. die bereich kopfzeile, hauptspalte usw. überlappt....

er soll den bereich quasi ignorieren und sich 100% in den vordergrund drängen ohne dass sich das element an vorher definierte abgrenzungen hält.....
ich hoffe ich habe mich verständlich ausgedrückt :-)

danke!

**tintifax** · 21.11.2019, 13:52

Zitat von stevepa

aber wo kann ich mein "div" element in contao hinterlegen so dass es über allem im vordergrund ist,
d.h. die bereich kopfzeile, hauptspalte usw. überlappt....

CSS => z-index

Kannst als Artikel auf deiner Startseite anlegen oder im Layout als Modul einbinden

Guckst Du hier: https://www.w3schools.com/cssref/pr_pos_z-index.asp

**derRenner** · 21.11.2019, 15:35

Mögliche Vorgehensweise:

• im Seitenlayout definierst du dir einen eigenen Layoutbereich » Position vor dem umschliessenden Element
• du legst dir ein HTML-Frontendmodul an

Code:

<div class="loader"></div>

• du fügst dieses Modul im Seitenlayout in den vorher angelegten Layoutbereich ein
• im Seitenlayout unter 'eigener JavaScript Code'

Code:

	$(window).load(function() {
		$(".loader").fadeOut("slow");;
	});

• in deinen CSS-Stylesheet fügst du folgende Zeilen hinzu

Code:

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: url(mein/pfad/zum/logo.jpg) center no-repeat;
}

**folkfreund** · 21.11.2019, 18:58

Und wenn ein Besucher Javascript abgeschaltet hat steht er im Dunklen (oder im Hellen, je nach deinem CSS)?

Ich würde die von mlweb vorgeschlagene keyframe-Animation bevorzugen!
Siehe z.B. bei kulturbanause