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;
 scrollbar-color: steelblue gold;
 scrollbar-width: auto;

}

section{ 

 scroll-snap-align: start;
 scroll-margin: 0;

} }

html, body { 

 position: relative;

} section{ 

 background: #fff;
 min-height: 100vh;
 padding: 2.5em;

}

  1. navigation {

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

  1. 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; }

  1. navigation li a,
  2. navigation li a:link,
  3. navigation li a:visited {

text-decoration: none; display: block; height: 2em; color: #204960; font-weight: bold; padding: 0.1em 1em; }

  1. navigation li a:hover,
  2. navigation li a:focus,
  3. 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 */

  1. part_1{

background: #fffbf0; }

  1. part_2{

background: #ebf5d7; }

  1. part_2 img,
  2. part_5 img {

float: right; margin-left: 1em; }

  1. part_3{

background: #ffebe6; }

  1. 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>

</nav> 

 	<section id="part_1" tabindex="1">

Webdesign

Im modernen Webdesign kommt den verschiedenen Webtechniken jeweils eine bestimmte Rolle zu.

  • <a href="#part_2">HTML</a> legt fest, was auf der Seite stehen soll (struktureller Aufbau einer Webseite)
  • <a href="#part_3">CSS</a> legt fest, wie es dargestellt werden soll (Formatierung & Gestaltung)
  • <a href="#part_4">JavaScript</a> legt fest, was passieren soll. (interaktive Elemente) .

<img src="https://wiki.selfhtml.org/images/7/78/HTML-CSS-JS.svg" alt="Trennung von Zuständigkeiten - Separation of Concerns">

 	</section>

 	<section id="part_2" tabindex="2">

HTML

<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. 

 	</section>

 	<section id="part_3" tabindex="3">

CSS

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.

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.

<code>Überschrift {
  Schriftgröße: 24 Punkt;
  Abstand-unten: 16 Punkt;
  Rahmenfarbe-oben: grün;
  Rahmenart-oben: doppelt
}</code>

 	</section>

 	<section id="part_4" tabindex="4">

JavaScript

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.

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. 

 	</section>

 	<section id="part_5" tabindex="5">

SVG

<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.

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.

 	</section>

</body></html>

Abgerufen am 21.07.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML-Scroll-Snap.html"