HTML / CSS Hilfe!

[MiRyder] · 21. Dezember 2014

Hallo!

Ich habe eine Animation, welche ein Screenshot von der normalen Seite wegfallen lässt. Jedoch sieht man danach nur den Background, anstatt den Text. Wie kann ich den Text danach noch anzeigen lassen?

Html:

HTML

<body>
<div id="site" class="pend"></div>
<div class="text_container"><h1>Test</h1></div>
</body>

CSS:

PHP

body{
	width: 100%;
	height: 100%;
	background-color: #0887FF;
	margin: 0;
	padding: 0;
}


.text_container{
	width: 960px;
	height: 100%;
	margin: 0 auto;
}


#site{ 
	background-image: url(site.png);
	width: 100%;
	height: 100%;
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;
} 


.pend { 
-webkit-animation-name: pend; 
animation-name: pend; 
}


@-webkit-keyframes pend { 
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; } 
	20%, 60% { -webkit-transform: rotate(-40deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; } 
40% { -webkit-transform: rotate(-30deg); -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; } 
80% { -webkit-transform: rotate(-35deg) translateY(0); opacity: 1; -webkit-transform-origin: top right; -webkit-animation-timing-function: ease-in-out; } 
100% { -webkit-transform: rotate(-35deg) translateY(80%); opacity: 0; } 
} 
@keyframes pend { 
0% { transform: rotate(0); transform-origin: top right; animation-timing-function: ease-in-out; } 
20%, 60% { transform: rotate(-40deg); transform-origin: top right; animation-timing-function: ease-in-out; } 
40% { transform: rotate(-30deg); transform-origin: top right; animation-timing-function: ease-in-out; } 
80% { transform: rotate(-35deg) translateY(0); opacity: 1; transform-origin: top right; animation-timing-function: ease-in-out; } 
100% { transform: rotate(-35deg) translateY(80%); opacity: 0; } 
}

Alles anzeigen

Die site.png bedeckt den ganzen Bildschirm, der "Test"-Text wird nach der Animation nicht angezeigt...

Dankeschön schon mal an alle hilfreichen Antworten

IPrototypeI · 21. Dezember 2014

Du kannst auch den z-index eines Elements ändern um somit ein Element in den Vordergrund zu setzen.

Wie das ganze funktioniert siehst du hier einfach mal auf demo klicken und ausführen danach den z-index höher stellen
http://www.w3schools.com/cssref/pr_pos_z-index.asp

[MiRyder] · 21. Dezember 2014

Zitat von IPrototypeI

Du kannst auch den z-index eines Elements ändern um somit ein Element in den Vordergrund zu setzen.

Wie das ganze funktioniert siehst du hier einfach mal auf demo klicken und ausführen danach den z-index höher stellen
http://www.w3schools.com/cssref/pr_pos_z-index.asp

Danke für die schnelle Antwort. Jedoch funktioniert dies auch nicht.. Der Text ist irgendwie hinter dem Hintergrund, also nicht zwischen Animation und Hintergrund. Hab wirklich keine Ahnung, was ich hier machen kann...

IPrototypeI · 22. Dezember 2014

Zitat von [MiRyder]

Danke für die schnelle Antwort. Jedoch funktioniert dies auch nicht.. Der Text ist irgendwie hinter dem Hintergrund, also nicht zwischen Animation und Hintergrund. Hab wirklich keine Ahnung, was ich hier machen kann...

Doch das sollte gehen

Code

.text_container{
width: 960px;
height: 100%;
margin: 0 auto;
position:relative;
z-index:1;
}

Sollte bei dir das Bild angezeigt werden so brauchst du hier nix ändern bei der ID site

Code

#site{
background-image: url(site.png);
width: 700px;
height: 300px;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

Alles anzeigen

Bild:

[MiRyder] · 22. Dezember 2014

Zitat von IPrototypeI

Doch das sollte gehen

Code

.text_container{
width: 960px;
height: 100%;
margin: 0 auto;
position:relative;
z-index:1;
}

Sollte bei dir das Bild angezeigt werden so brauchst du hier nix ändern bei der ID site

Code

#site{
background-image: url(site.png);
width: 700px;
height: 300px;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

Alles anzeigen

Bild:

Alles anzeigen

Hab ein wenig weiter rumprobiert und hab es jetzt endlich geschafft

breadfish.de 12. März 2022