Beispiel:CSS-Hero-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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">
  <h1>Parallax Effect mit <code>transform:translate</code></h1>
</header>
    
<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>
    
<section class="parallax">
</section>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Hero-6.html&oldid=81140“