Single-page-CSS

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite

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

1 Vorüberlegungen
1.1 Inhalt
1.2 Bedienung
2 Anwendungsbeispiele
2.1 One-Pager mit target
2.1.1 HTML-Grundstruktur
2.1.2 CSS: Beschränkung auf den ausgewählten Seitenbereich
2.1.3 CSS: weiche Übergänge mit Einblendungen
2.2 Alternative mit dem Checkbox-Hack
2.2.1 Navigation
2.2.2 Smooth Scrolling
3 Fazit
4 Quellen
4.1 Weblinks

Vorüberlegungen/wiki/HTML/Tutorials/Single-Page_Webseite#Vor.C3.BCberlegungen
Inhalt/wiki/HTML/Tutorials/Single-Page_Webseite#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]
Bedienung/wiki/HTML/Tutorials/Single-Page_Webseite#Bedienung
Anwendungsbeispiele/wiki/HTML/Tutorials/Single-Page_Webseite#Anwendungsbeispiele
One-Pager mit target/wiki/HTML/Tutorials/Single-Page_Webseite#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]
HTML-Grundstruktur/wiki/HTML/Tutorials/Single-Page_Webseite#HTML-Grundstruktur
Beispiel ausprobieren

QuelltextVorschau

One-Pager ohne JavaScript

Gruppen

Die Seitenbereiche werden mit einzelnen section-Elementen mit einer eindeutigen id ausgezeichnet.
Die Navigation besteht aus internen Verweisen, die auf diese id-Anker referenzieren.
CSS: Beschränkung auf den ausgewählten Seitenbereich/wiki/HTML/Tutorials/Single-Page_Webseite#CSS:_Beschr.C3.A4nkung_auf_den_ausgew.C3.A4hlten_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 ausprobieren

QuelltextVorschau

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.
CSS: weiche Übergänge mit Einblendungen/wiki/HTML/Tutorials/Single-Page_Webseite#CSS:_weiche_.C3.9Cberg.C3.A4nge_mit_Einblendungen
Beispiel ausprobieren

QuelltextVorschau

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.
Alternative mit dem Checkbox-Hack/wiki/HTML/Tutorials/Single-Page_Webseite#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.
Navigation/wiki/HTML/Tutorials/Single-Page_Webseite#Navigation
Beispiel ausprobieren

QuelltextVorschau










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.
Smooth Scrolling/wiki/HTML/Tutorials/Single-Page_Webseite#Smooth_Scrolling
Beispiel ausprobieren

QuelltextVorschau

.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 Geschwisterkombinator ~ 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]
Fazit/wiki/HTML/Tutorials/Single-Page_Webseite#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.
Hauptartikel: JavaScript/Tutorials/Webanwendung
Hauptartikel: JavaScript/Tutorials/mobile Web-App mit HTML5
Quellen/wiki/HTML/Tutorials/Single-Page_Webseite#Quellen
Jan Semler: Single-Page Website und wie man es richtig macht (28.01.2013)
One Page CSS-Only Navigation by Alberto Hartzet

tympanus: CSS-Only Responsive Layout with Smooth Transitions

Weblinks/wiki/HTML/Tutorials/Single-Page_Webseite#Weblinks

jansemler: Single-Page Website und wie man es richtig macht
t3n.de: 13 schicke HTML- und WordPress-Templates für deine Webvisitenkarte
codeplanet: How to Make a Single Page Website
antsmagazine: HTML5 and CSS3 Single page website tutorials

onepagelove: 430 One Pagers tagged with: CSS3

JavaScript

smashingmagazine: How I Built The One Page Scroll Plugin

Restaurierungsatelier Leipzig