Beispiel:Hero-5.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scroll Effekt</title>
<style>
html, body { margin: 0; }
html { height: 100vh; font-size:2em;
}
.parallax {
background-image: url("https://wiki.selfhtml.org/images/e/e4/TotemPole-2000.jpg");
min-height: 90vh; background-position: center; background-repeat: no-repeat; background-size: cover; }
section.parallax {
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);
}
@media (prefers-reduced-motion: no-preference) { .parallax { /* Create the parallax scrolling effect */ background-attachment: fixed; } }
section { min-height:90vh; background-color: #ffebe6; border: thin solid; color: #c32e04; padding: 0 1em; }
section:last-of-type { background-color: hsla(44, 75%, 50%,.1); color: #333; padding: 1em; }
h1 {
font-size: 2em;
color: navy;
position:absolute;
top: 10%;
left: 20%;
}
</style>
</head>
<body>
<header class="parallax">
Der wilde Westen
</header>
<section>
Scrollen Sie nach oben und unten, um den Parallax Scrolling Effekt zu sehen.<p>
<p>Tipp: Setzen Sie die background-attachment-Eigenschaft auf local, um den Scroll-Effekt zu entfernen.
</section>
<section class="parallax"></section>
<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>
</body> </html>
