Beispiel:HTML-Scroll-Snap.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>One-Pager mit Scroll-Snap</title>
  <style>
@media (prefers-reduced-motion: no-preference){
html, body {
  margin: 0;
  padding: 0; 
  scroll-snap-type: y mandatory; 
  scroll-behavior: smooth;
  scroll-padding: 0;
}

section{
  scroll-snap-align: start;
  scroll-margin: 0;
} 
}

html, body {
  position: relative;
}
section{
  background: #fff;
  min-height: 100vh;
  padding: 2.5em;
}

#navigation {
	position: fixed;
	top: 0;
	left: calc(50% - 20em);
	z-index: 99;
	margin: 0 auto;
	padding: 1em;
	width: 40em;
	background: transparent;
	list-style: none;
}

#navigation li {
	float: left;
	height: 2em;
	text-align: center;
	margin: 0;
	background: gold;
	border: thin solid #204960;
	border-radius: .5em;
	line-height: 150%;
	font-family: Arial bold, Helvetica, sans-serif;
	margin: 0 0 0 1em;
}

#navigation li a,
#navigation li a:link,
#navigation li a:visited {
	text-decoration: none;
	display: block;
	height: 2em;
	color: #204960;
	font-weight: bold;
	padding: 0.1em 1em;
}

#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active {
	background: #204960;
	color: gold;
	border-radius: .5em;
}
section > * {
    max-width: 40em;
    margin: 0.5em auto;  
}
      
      
section h2 {
	font-size: 4em;
	text-align: center;
	line-height: 2rem;
	-webkit-backface-visibility: hidden;
}
 
section p {	
	text-align: justify;
	-webkit-backface-visibility: hidden;
}
 
/* Colored sections */
 
#part_1{
	background: #fffbf0;
}
 
#part_2{
	background: #ebf5d7;
}

#part_2 img,
#part_5 img {
	float: right;
	margin-left: 1em;
}
 
#part_3{
	background: #ffebe6;
}
 
#part_4{
	background: #e6f2f7;
}
 
 
 
@media screen and (max-width: 32em) {
	section h2 {
		font-size: 2em;
	}
 
	section p {
		width: 90%;
		left: 5%;
		margin-top: 0;
	}
 
}
 
  </style>
</head>
 
<body>
<nav>	
	<ul id="navigation">
		<li><a href="#part_1">Startseite</a></li>
		<li><a href="#part_2">HTML</a></li>
		<li><a href="#part_3">CSS</a></li>
		<li><a href="#part_4">JavaScript</a></li>
		<li><a href="#part_5">SVG</a></li>
	</ul>
</nav>
 
  	<section id="part_1" tabindex="1">
  		<h2>Webdesign</h2>
  		<p>Im modernen Webdesign kommt den verschiedenen Webtechniken jeweils eine bestimmte Rolle zu.</p>
        <ul>
          <li><a href="#part_2">HTML</a> legt fest, <strong>was</strong> auf der Seite stehen soll (struktureller Aufbau einer Webseite)</li>
          <li><a href="#part_3">CSS</a> legt fest, <strong>wie</strong> es dargestellt werden soll (Formatierung &amp; Gestaltung)</li>
          <li><a href="#part_4">JavaScript</a> legt fest, was <strong>passieren</strong> soll. (interaktive Elemente) .</li>
        </ul>
        <p><img src="https://wiki.selfhtml.org/images/7/78/HTML-CSS-JS.svg" alt="Trennung von Zuständigkeiten - Separation of Concerns"></p>
  	</section>
 
  	<section id="part_2" tabindex="2">
  		<h2>HTML</h2>
  		<p><img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" width="200" alt="HTML5-Logos">Eine solche Auszeichnungssprache hat die Aufgabe, die logischen 
Bestandteile eines textorientierten Dokuments zu beschreiben. Als 
Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische 
Elemente eines textorientierten Dokuments, wie Überschriften, 
Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche 
auszuzeichnen. </p>
  	</section>
 
  	<section id="part_3" tabindex="3">
  		<h2>CSS</h2>
  		<p>Bei Cascading Stylesheets handelt sich um eine unmittelbare 
Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt 
sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner
 HTML-Elemente.</p>
        <p>Mit Hilfe von Stylesheets können Sie beispielsweise 
festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem 
Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie 
oberhalb dargestellt werden.</p>
        <p><code></code></p><pre><code>Überschrift {
  Schriftgröße: 24 Punkt;
  Abstand-unten: 16 Punkt;
  Rahmenfarbe-oben: grün;
  Rahmenart-oben: doppelt
}</code></pre><p></p>
  	</section>
 
  	<section id="part_4" tabindex="4">
  		<h2>JavaScript</h2>
  		<p>JavaScripte haben Zugriff auf das Browserfenster und das darin 
angezeigte HTML-Dokument. Ihre wichtigste Aufgabe besteht darin, auf 
Benutzereingaben im Dokument zu reagieren (z.B. klickt der Benutzer auf 
ein Element oder gibt einen Text in ein Formularfeld ein). JavaScripte 
können daraufhin Änderungen im gegenwärtig angezeigten HTML-Dokument 
vornehmen. Diese Änderungen finden nur im Browser, genauer gesagt im 
Arbeitsspeicher des Rechners statt, während das Dokument auf dem 
Web-Server unangetastet bleibt.</p>
<p>
Die Änderungen können sowohl den Inhalt als auch die Darstellung des 
Dokuments betreffen. Auf diese Weise kann ein Dokument interaktiv und 
»dynamisch« gestaltet werden. Das bedeutet, es kann auf Benutzereingaben
 reagieren und sich ändern, ohne dass ein neues Dokument vom Web-Server 
abgerufen werden muss. Beispielsweise können Zusatzinformationen 
eingeblendet werden, sobald der Anwender mit der Maus auf ein bestimmtes
 HTML-Element klickt. </p>
  	</section>
 
  	<section id="part_5" tabindex="5">
  		<h2>SVG</h2>
  		<p><img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" width="200" alt="HTML5-Logos">SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format.
 Damit lassen sich in allen Viewport-Auflösungen gestochen scharfe 
Grafiken darstellen.</p>
        <p>Man sollte es einsetzen, wenn sich die meisten Bildelemente 
mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit 
oder eine Dynamik gewünscht ist.</p>
 
  	</section>

</body></html>