Beispiel:Hero-6.html
<!DOCTYPE html> <html lang="de"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta charset="UTF-8"> <title>Parallax Effekt mit transform:translate</title>
<style> header, section {
position: relative; min-height: 100vh; width: 100%; transform-style: inherit;
padding: 1em; }
header {
z-index: -1;
}
.parallax::before {
content: ;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: block;
background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
background-position: center center;
background-size: cover; transform: translateZ(-1px) scale(1); min-height: 100%; z-index: -2;
}
section.parallax::before {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg/1280px-Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg);
background-position: top center;
z-index: -1;
}
h1 {
font-size: 3rem; position: absolute; padding: 1rem; background: #fafafa; box-shadow: 0 0 20px #333; top: 23%; left: 25%; transform: translateZ(50px) scale(.5) ;
}
html {
margin: 0; padding: 0; overflow: hidden; height: 100%;
}
body {
overflow-x: hidden; overflow-y: scroll; height: 100%; perspective: 100px; transform-style: preserve-3d; font-family: Arial, Helvetica, sans-serif;
} </style>
</head>
<body> <header class="parallax">
Parallax Effect mit transform:translate
</header>
<section>
Monument Valley
Das Monument Valley (Navajo: Tsé Biiʼ Ndzisgaii) ist eine Hochebene auf dem Colorado-Plateau an der südlichen Grenze des US-Bundesstaates Utah sowie im Norden Arizonas und liegt innerhalb der Navajo-Nation-Reservation in der Nähe der Ortschaft Mexican Hat in Utah.
Es ist bekannt für seine Tafelberge, Felstürme und -nadeln und diente bereits vielfach als Kulisse für Dreharbeiten und Bilder.
<footer>
Bildquellen
- <a rel="license" hreF="https://commons.wikimedia.org/wiki/File:USA_10315_Monument_Valley_Luca_Galuzzi_2007.jpg">Monument Valley von Luca Galuzzi</a> (Wikimedia Commons, CC BY-SA 3.0)
- <a rel="license" hreF="https://commons.wikimedia.org/wiki/File:Forrest_Gump_Point_Monument_Valley_November_2018_003.jpg">Forrest Gump Point Monument Valley von King of Hearts</a> (Wikimedia Commons, CC BY-SA 3.0)
</footer> </section>
<section class="parallax"> </section>
</body> </html>
