HTML/Tutorials/Single-Page Webseite

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Gerade für Web-Visitenkarten, Landing Pages und kleinere Projekte sind Single-Page-Webseiten oder One-Pager perfekt geeignet.

Bei Single-Page-Webseiten wird der Inhalt nicht auf mehrere kurze Seiten verteilt, sondern sofort geladen und durch Scrollen oder Navigieren ohne weiteren HTTP-Request sofort eingeblendet. Allerdings wird dieser potentielle Geschwindigkeitsvorteil durch den Einsatz von Frameworks oft in sein Gegenteil verkehrt, wenn erst mehrere MB geladen werden müssen, um die Funktionalität einer einzelnen Seite herzustellen.

In diesen beiden Beispielen sehen Sie, wie Sie eine solche Seite nur mit CSS realisieren können.

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

[Bearbeiten] Inhalt

One-Pager sind sinnvoll, wenn Sie einen klar umrissenen Inhalt von einigen Seiten haben. Umfangreichere Webprojekte oder nicht thematisch zusammengehörende Seiten sollten besser mit klassischen Einzelseiten realisiert werden.[1]

[Bearbeiten] Bedienung

[Bearbeiten] Anwendungsbeispiele

[Bearbeiten] One-Pager mit target

Diese Webseite besteht aus mehreren Seiten, die in section-Elementen untereinander notiert sind. Die Navigation besteht aus internen Ankern, die zu den einzelnen Seitenbereichen springen.

Sobald eine Seite durch einen Klick oder Tap auf den entsprechenden Verweis als Ziel (target) aktiviert ist, kann man diese mit CSS über die strukturelle Pseudoklasse :target sichtbar machen.[2]

[Bearbeiten] HTML-Grundstruktur

Beispiel ansehen …
<section id="part_1">
  <h1>One-Pager ohne JavaScript</h1>
  ...
</section>
 
<section id="part_2">
  <h1>Gruppen</h1>
  ...
</section>
 
...
 
<nav>	
	<ul id="navigation">
		<li><a href="#part_1">Startseite</a></li>
		<li><a href="#part_2">Gruppen</a></li>
		<li><a href="#part_3">Wunder</a></li>
		<li><a href="#part_4">Finale</a></li>
		<li><a href="#part_5">?</a></li>
	</ul>
</nav>
Die Seitenbereiche werden mit einzelnen section-Elementen mit einer eindeutigen id ausgezeichnet.
Die Navigation besteht aus internen Verweisen, die auf diese id-Anker referenzieren.

[Bearbeiten] CSS: Beschränkung auf den ausgewählten Seitenbereich

Im oberen Beispiel lassen sich zwar alle Seitenbereiche durch die Navigation ansteuern; die Navigation ist dann allerdings nicht mehr sichtbar. Im folgenden Beispiel erhält nun die Seite eine Höhe von 100 vh, so dass jeweils nur der ausgewählte Seitenbereich sichtbar ist.

Beispiel ansehen …
main {
	position: relative;
	overflow: hidden;
	height: 100vh;
}
 
section {
	padding:3em 1em 1em;
	width:100%;
	height: 100vh;
	background: white;	
}
Das main-Element erhält eine Höhe von 100vh. Dies entspricht der aktuellen Viewportabmessung. Durch die Festlegung overflow: hidden; werden Seitenbereiche, die außerhalb des Viewports liegen nicht angezeigt. Es kann aber auch nicht dorthin gescrollt werden.


Beim Umschalten zwischen den einzelnen Seitenbereichen kommt es zu einem abrupten Übergang.

[Bearbeiten] CSS: weiche Übergänge mit Einblendungen

Beispiel ansehen …
main {
	position: relative;
	overflow: hidden;
	height: 100vh;
}
 
section {
	padding:3em 1em 1em;
	width:100%;
	height: 100vh;	
	background: white;	
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s;
}
 
section:first-of-type {
  opacity: 1;
  transition: all 0.5s;
}
 
section:target {
  opacity: 1;
 
}
Alle Seitenbereiche werden nun absolut übereinander positioniert. Durch opacity: 0; sind sie völlig durchscheinend bis auf das erste Element, das durch die strukturelle Pseudoklasse first-of-type sichtbar ist.
Wenn nun ein Seitenbereich mit dem Klick auf den entsprechenden Link ausgewählt wird, erhält er die Pseudoklasse target und wird entsprechend mit CSS formatiert. Diese Änderung der Deckkraft wird mit transition: all 0.5s; mit einem weichen Übergang versehen.

[Bearbeiten] Alternative mit dem Checkbox-Hack

Der Checkbox-Hack ist ein Trick, bei dem eine Checkbox dazu zweckentfremdet wird, Interaktivität ohne den Einsatz von JavaScript zu erreichen. Während die eigentliche Checkbox durch CSS ständig ausgeblendet bleibt, kann sie durch das dazugehörende label angeklickt werden.

[Bearbeiten] Navigation

Beispiel ansehen …
  <input name="radio-set" id="st-control-1" type="radio">
  <label for id="st-control-1">Startseite</label>
  <input name="radio-set" id="st-control-2" type="radio">
  <label for id="st-control-2">HTML</label>
  <input name="radio-set" id="st-control-3" type="radio">
  <label for id="st-control-3">CSS</label>
  <input name="radio-set" id="st-control-4" type="radio">
  <label for id="st-control-4">JavaScript</label>
  <input name="radio-set" id="st-control-5" type="radio">
  <label for id="st-control-51">SVG</label>
Jedem Radio-Button ist ein label zugeordnet, das ebenfalls angeklickt werden kann.
.st-container > input,
.st-container label {
	position: fixed;
	top: 0;
	width: 20%;}
 
.st-container > input {
	opacity: 0;
	z-index: 1000;
}
 
.st-container label {
	z-index: 999;
	background: #00296d;
	color: gold;
	text-align: center;
}
Die Radio-Buttons und ihre label werden oben am Rand fixiert. Die Radio-Buttons werden zwar ausgeblendet, bleiben aber funktionsfähig.

[Bearbeiten] Smooth Scrolling

Beispiel ansehen …
.st-scroll,
section {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 2em 0;
}
 
.st-scroll {
	transition: all 0.6s ease-in-out;
}
 
section{
	background: #fff;
	overflow: hidden;
} 
 
#st-control-1:checked ~ .st-scroll {
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	transform: translateY(-400%);
}
Das main-Element mit der Klasse .st-scroll nimmt die gesamte Breite und Höhe des Bildschirms ein.
Über den Geschwisterselektor ~ wird das mit dem label verbundene main-Element transformiert und die section-Elemente mit transform: translateY() passend ein- und weggeschoben.
Um einen weichen Übergang zu erzielen, wird der Vorgang mit transition: all 0.6s ease-in-out; über einen Zeitraum von 0.6s ausgeführt.[3]

[Bearbeiten] Fazit

Die hier nur mit CSS realisierten Alternativen sind voll funktionsfähig. Allerdings lassen sich einige Extras wie Weiter-Buttons nur mit vielen Zeilen CSS realisieren und sind dann schwer zu erweitern, bzw. fehlen wie das Lazy-Loading gegenüber einer mit JavaScript erweiterten Variante.

Neben dem Navigationsmenü können Sie Seiten auch mit Smooth-Scrolling ansteuern; allerdings wird dann nicht der Fragmentbezeichner der aktuellen Seite angezeigt.

[Bearbeiten] Quellen

  1. Jan Semler: Single-Page Website und wie man es richtig macht (28.01.2013)
  2. One Page CSS-Only Navigation by Alberto Hartzet
  3. tympanus: CSS-Only Responsive Layout with Smooth Transitions

[Bearbeiten] Weblinks


JavaScript

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML