Bild Overlay, das automatisch nach oben verschwindet

[adirpm]

Hey, ich suche einen ähnlichen Effekt, der auf folgender Website zu sehen ist: http://sorrism.tumblr.com/
Beim Öffnen der Seite erscheint ein Bild, das nach einer Weile nach oben verschwindet.
Ich weiß, wie ich das Bild über die Website lege und wie es verschwindet - allerdings bleibt immer ein weißer Kasten.. Also der platz, an dem das Bild war, ist weiter zu sehen.

Vielleicht könnt ihr mir ja helfen. Danke!

 

[Arne Drews]

Hallo,

Wie sieht denn Dein Versuch aus?

Gruß Arne

 

[adirpm]

Hey, danke für die schnelle Reaktion!

@-webkit-keyframes fade-out {
0% { opacity: 1; -webkit-transform: scale(1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(.1); opacity: 0;}
}
.overlay {
display:block;
width:100vw;
height:100vh;
background-color:#ffffff;

background-image:url(http://static.tumblr.com/f99c00daf4...tumblr_static_2ajzmn2v07k0cs0048cc880s8.jpg);
background-repeat:no-repeat;
background-position:center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;

-webkit-animation-name: fade-in;
-webkit-animation-duration: 1.5s;
-webkit-animation: fade-out 3.5s ease-in;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
und im body
<div id="overlay"></div>

 

[SpiceLab]

Im CSS steht die Klasse .overlay, im HTML wird jedoch die gleichnamige ID aufgerufen.

Entweder

#overlay {...}

oder

<div class="overlay"></div>

Desweiteren berücksichtigst Du im CSS mit @-webkit-keyframes, -webkit-transform und -webkit-animation-*** nur die älteren Webkit-Browser (Chrome, Safari, Opera), die seinerzeit noch diesen Präfix benötigten (ihre aktuellen Versionen interpretieren den Code dennoch). Die übrigen Browser (FF + IE) bleiben damit aber außen vor.

1. http://caniuse.com/#search=keyframes
2. http://caniuse.com/#search=transform
3. http://caniuse.com/#search=animation

 

[adirpm]

Okay danke für den Hinweis! Das schaue ich mir mal an. Gibt es dennoch eine Möglichkeit, dass height (des Bildes) auf 0 gesetzt wird, nachdem die Animation abgelaufen ist?
Derzeit sieht es so aus, dass das Bild auf dem kompletten Bildschirm angezeigt wird, dann verschwindet und ein weißer Kasten zurück bleibt. Um den Inhalt der Seite zu sehen, muss man dann runterscrollen.

 

[adirpm]

Ah hab es hingekommen mit: 100% {-webkit-transform: scale(.1); opacity: 0; height:0;}

Danke :)

 

[SpiceLab]

Gibt es dennoch eine Möglichkeit, dass height [...] auf 0 gesetzt wird, nachdem die Animation abgelaufen ist?

Klar gibt es die

Scheinbar hast Du Dir den HTML- u. CSS-Code der Beispielseite nicht näher angeschaut.