In diesem Betrag möchte ich euch zeigen, wie ihr den oben zu sehenden Effekt mittels CSS erstellen könnt.
Ich habe diesen Effekt zum ersten Mal in der Dokureihe Acient Aliens gesehen und mich gefragt, wie es möglich ist aus einem 2D Bild einen räumlichen Tiefeneffekt zu erzeugen.
Mir war schnell klar, dass es eigentlich nur über mehrere Ebenen möglich sein kann – ähnlich den Layern bei Photoshop.
Dieser Effekt hat 4 Ebenen und jede Ebene bekommt ihren eigenen CSS-Effekt (von vorne nach hinten):
- Staub Layer (optional) – [scale, translateX, translateY, blur]
- Vordergrund – [scale, translateX, blur]
- Mittlerer Teil – [scale, translateX, translateY, rotate]
- Hintergrund – [translateX, translateY]
Mit Hilfe des CSS Befehls z-index können wir die Reihenfolgen der Ebenen festlegen. Ihr könnt euch die Ebenen wie einen Stapel Papier vorstellen. Die Ebene mit dem höchsten z-index Wert liegt ganz oben. Je kleiner der z-index Wert, desto weiter hinten liegt die Ebene auf dem Stapel.
Ein Großteil der Arbeit besteht wohl darin, die einzelnen Ebenen mit einem Grafikprogramm wie Photoshop aus dem Hauptbild auszuschneiden. Hier seht ihr wie es aussehen kann.
Foreground
Midground
Background
index.html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<title>Dynamic Image CSS</title>
<meta name="description" content="Dynamic Image CSS">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<div class="dust"><img src="dust.png" /></div>
<div class="foreground"><img src="foreground.png" /></div>
<div class="midground"><img src="midground.png" /></div>
<div class="background"><img src="background.jpg" /></div>
</div>
<!--wrapper-->
</body>
</html>
style.css
body {
margin: 0px;
background-color: #dbdbdb;
}
#wrapper {
position: fixed;
inset: 0px;
max-width: 100vw;
max-height: 100dvh;
margin: auto;
overflow: hidden;
width: 379px;
height: 568px;
box-shadow: 0px 0px 30px 5px rgba(0,0,0,.3);
transform: rotate(-2deg);
border: 10px solid #fff;
}
/********DUST********/
.dust {
z-index: 4;
-moz-animation-name: dust;
-ms-animation-name: dust;
-o-animation-name: dust;
-webkit-animation-name: dust;
animation-name: dust;
}
@keyframes dust {
0% { transform: scale(1); }
100% { transform: scale(2) translateX(10px) translateY(0px); filter: blur(2px);}
}
/********FOREGROUND********/
.foreground {
z-index: 3;
-moz-animation-name: foreground;
-ms-animation-name: foreground;
-o-animation-name: foreground;
-webkit-animation-name: foreground;
animation-name: foreground;
}
@keyframes foreground {
0% { transform: scale(1); }
100% { transform: scale(1.2) translateX(-60px); filter: blur(10px); }
}
/********MIDGROUND********/
.midground {
z-index:2;
-moz-animation-name: midground;
-ms-animation-name: midground;
-o-animation-name: midground;
-webkit-animation-name: midground;
animation-name: midground;
}
@keyframes midground {
0% { transform: scale(1); }
100% { transform: scale(1.4) translateX(-100px) translateY(0px) rotate(5deg); }
}
/********BACKGROUND********/
.background, .dust, .foreground, .midground {
position: absolute;
margin-left: -80px;
z-index: 1;
animation-name: background;
animation-duration: 40s;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
@keyframes background {
0% {transform:translateX(0px) translateY(0px);}
100% {transform:translateX(-130px) translateY(0px);}
}