Willkommenstext in DIV mit Fadout

**EmZett** · 29.12.2013, 19:08

Hallo zusammen,

ich bräuchte mal Eure Hilfe.

Ich habe da eine Startseite. Über diese möchte ich einen DIV-Layer legen. Dieser soll beim Aufrufen der Seite alles andere Überdecken und einen Text beinhalten. Nach 4 sek soll dieses Div dann langsam über einen fade out verschwinden und der Eigentliche Content zum Vorschein kommen.

In der vorherigen Seite ohne Contao hatte ich etwas gefunden indem ich das div ins die Seitenstruktur einbaue und dann über CSS und

HTML-Code:

<script type="text/javascript">
$(document).ready(function(){
	    setTimeout(function(){
	        $('#dvData').fadeOut(2000);}, 3000);
	});
</script>

das bekomme ich aber nicht hin ohne an das HTML-Template von Contao zu gehen und das soll man ja nicht.

Ich vermute ich denke schon zu lage darüber nach und finde den Weg nicht mehr.

Kann mir da bitte jemand auf die Sprünge helfen?

Vielen Dank und beste Grüße
EmZett

**schumja** · 29.12.2013, 19:23

Du kannst das JavaScript im seitenlayout hinzufügen.

Gesendet von meinem Xperia Z mit Tapatalk 4

**mlweb** · 31.12.2013, 17:19

Ich würde je nach benötigtem Inhalt des Layers auch über eine Lösung mit css3 und animation nachdenken. Zumindestens dann, wenn Du auf alte Browser keine Rücksicht nehmen musst, sonst ggf. mit Fallback.

Hier ein kleines Beispiel des Funktionsprinzips - Die Animation selbst kann man natürlich noch mannigfaltig verfeinern.

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fade Out Layer</title>

<style type="text/css">
@-webkit-keyframes fade {
    0% {
		opacity: 1;
		height: 100%;
		width: 100%;
	}
	100% {
		opacity: 0;
		height: 0;
		width: 0;
	}
}
@-moz-keyframes fade {
    0% {
		opacity: 1;
		height: 100%;
		width: 100%;
	}
	100% {
		opacity: 0;
		height: 0;
		width: 0;
	}
}
@keyframes fade {
    0% {
		opacity: 1;
		height: 100%;
		width: 100%;
	}
	100% {
		opacity: 0;
		height: 0;
		width: 0;
	}
}
body {

}
#wrapper {
	min-height: 500px;
	background-color: red;
	
}
body:before {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
	background-color: green;
	color: black;
	content: "Das ist der Layer";
	-webkit-animation: fade 4s ease 1;
	-moz-animation: fade 4s ease 1;
	animation: fade 4s ease 1;
	
}

	
</style>
</head>

<body>
<div id="wrapper">Das ist der normale Inhalt</div>
</body>
</html>

Guten Rutsch ins neue Jahr