Beispiel:HTML-Scroll-Snap-2.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>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>