Beispiel:HTML-Scroll-Snap-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Storytelling</title>
 
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-y: hidden;
}

.slider {
  font-family: sans-serif;
      scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: scroll;
}

section {
  border-right: thin solid white;
  padding: 1rem;
  min-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  text-align: center;
  position: relative;
}

h1 {
  text-align: center;
  color: white;
  margin-top: 1em;
  font-size: calc(1rem + 3vw);
}
</style>

</head>

<body translate="no">
  <div class="slider">
	<section style="background: rgb(119, 109, 224) none repeat scroll 0% 0%;">
		<h1>Interactive Storytelling</h1>
        <p>Abschnitt 1</p>
	</section>
	<section style="background: rgb(183, 211, 247) none repeat scroll 0% 0%;">
		<h1>Section 2</h1>
	</section>
	<section style="background: rgb(236, 179, 252) none repeat scroll 0% 0%;">
		<h1>Section 3</h1>
	</section>
	<section style="background: rgb(255, 124, 211) none repeat scroll 0% 0%;">
		<h1>Section 4</h1>
	</section>
	<section style="background: rgb(96, 169, 214) none repeat scroll 0% 0%;">
		<h1>Section 5</h1>
	</section>
</div>

</body></html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:HTML-Scroll-Snap-2.html&oldid=80607“