Beispiel:CSS-Hero-5.html
Aus SELFHTML-Wiki
<!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">
<h1>Der wilde Westen</h1>
</header>
<section>
<p>Scrollen Sie nach oben und unten, um den Parallax Scrolling Effekt zu sehen.<p>
<p>Tipp: Setzen Sie die <code>background-attachment</code>-Eigenschaft auf <code>local</code>, um den Scroll-Effekt zu entfernen.</p>
</section>
<section class="parallax"></section>
<section>
<h2>Monument Valley</h2>
<p>
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.</p>
<p>Es ist bekannt für seine Tafelberge, Felstürme und -nadeln und diente bereits vielfach als Kulisse für Dreharbeiten und Bilder.</p>
<footer>
<h3>Bildquellen</h3>
<ul>
<li><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)</li>
<li><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)</li>
</ul>
</footer>
</section>
</body>
</html>
