Beispiel:OnePager-3.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>One-Pager Komfort-Version mit JavaScript</title>
<style>
:root {
/* Grundfarben */
--color-primary: steelblue;
--color-secondary: gold;
--color-accent: #204960;
--color-gray-light: #eee;
--color-gray-medium: #ccc;
/* Section-Farben */
--color-part-1-bg: #fffbf0;
--color-part-2-bg: white;
--color-part-3-bg: oklch(0.95 0.16 300);
--color-part-3-text: oklch(0.44 0.16 300);
--color-part-4-bg: oklch(0.99 0.05 100);
--color-part-5-bg: oklch(0.95 0.03 70);
}
html, body {
margin: 0;
padding: 0;
position: relative;
font-family: sans-serif;
scroll-snap-type: y mandatory;
}
@media (prefers-reduced-motion: no-preference){
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scroll-padding: 0;
scrollbar-color: var(--color-primary) var(--color-secondary);
scrollbar-width: auto;
}
section{
scroll-snap-align: start;
scroll-margin: 0;
}
}
html::scroll-button(*) {
color: var(--color-primary);
background: var(--color-secondary);
border: thin solid var(--color-accent);
border-radius: .3em;
font-size: 1.5em;
aspect-ratio: 1 / 1;
position: fixed;
right: 1vw;
}
html::scroll-button(*):hover {
color: var(--color-secondary);
background: var(--color-primary);
}
html::scroll-button(*):disabled {
color: #CCC;
background: #DDD;
border-color: #CCC;
}
html::scroll-button(down) {
content: "▼";
bottom: calc(50% - 1em);
}
@media screen {
html {
scrollbar-color: var(--color-primary) var(--color-secondary);
scrollbar-width: auto;
}
html::-webkit-scrollbar { width: 14px;}
html::-webkit-scrollbar-thumb {
background-color: var(--color-primary);
border-radius: 14px;
border: 3px solid var(--color-secondary);
}
html::-webkit-scrollbar-track { background: var(--color-secondary); }
section {
background: #fff;
min-height: 100vh;
}
/* Back to Top Button */
#backToTop {
position: fixed;
bottom: 1vw;
right: 1vw;
font-size: 1.5em;
aspect-ratio: 1 / 1;
border: none;
border-radius: 0.5em;
background: var(--color-secondary);
color: var(--color-primary);
border: thin solid var(--color-accent);
border-radius: .3em;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;
}
#backToTop.visible {
opacity: 1;
pointer-events: auto;
}
#backToTop.visible:hover {
background: var(--color-primary);
color: var(--color-secondary);
}
}
section { padding: 1em; }
img { max-width: 100%; }
.logo {
float: right;
margin-inline-start: 1em;
width: 12em;
max-width: 30%;
animation: linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
@keyframes reveal {
from { opacity: 0; clip-path: inset(45% 20% 45% 20%); }
to { opacity: 1; clip-path: inset(0); }
}
.clear { clear: right; }
h1, h2, h3 { font-family: serif; }
nav {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
background: transparent;
}
#navigation {
display: flex;
flex-direction: row;
gap: 0.4em;
max-width: 40em;
margin: 0 auto;
padding: 1em;
}
#navigation li { list-style: none; }
#navigation li a,
#navigation li a:link,
#navigation li a:visited {
display: block;
margin: 0 0.4em 0.5em 0;
padding: 0.1em 0.5em;
font-weight: bold;
text-decoration: none;
text-align: center;
line-height: 180%;
color: var(--color-accent);
background: var(--color-secondary);
border: thin solid var(--color-accent);
border-radius: .5em;
}
#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active {
color: var(--color-secondary);
background: var(--color-accent);
}
#navigation li a[aria-current="location"] { position: relative; }
#navigation li a[aria-current="location"]::after {
content: "";
position: absolute;
bottom: -0.3em;
left: 10%;
width: 80%;
height: 0.3em;
background-color: var(--color-primary);
}
section > * {
max-width: 40em;
margin: 0.5em auto;
}
section h2 {
font-size: 4em;
text-align: center;
line-height: 2rem;
-webkit-backface-visibility: hidden;
margin-top: 5rem;
}
/* Section-Farben */
#part_1 { background: var(--color-part-1-bg); }
#part_2 { background: var(--color-part-2-bg); }
#part_3 { background: var(--color-part-3-bg); color: var(--color-part-3-text); }
#part_4 { background: var(--color-part-4-bg); }
#part_5 { background: var(--color-part-5-bg); }
#html_example { margin-top: 1em; max-width: 28em; }
#js_example { display: block; width: 22em; max-width: 100%; margin-top: 2em; }
#js_universe { background: black; color: white; padding: 0.5em; }
#js_play { font-size: 1em; aspect-ratio: 1; width: 2.5em; }
svg#js_solar_system { width: 20em; height: 20em; display: block; margin: auto; }
/* Wide windows */
@media screen and (width > 37em) {
section{ padding: 1em; }
section h2 { font-size: 4em; }
section p { text-align: justify; }
#navigation { gap: 1em; }
#navigation li a,
#navigation li a:link,
#navigation li a:visited { padding: 0.1em 1em; }
}
@media print {
nav, #backToTop { display: none; }
::scroll-button(*) { display: none; }
* { color: black !important; background: none !important; }
section { break-inside: avoid; }
@page { margin: 10pt 20pt 30pt 60pt; }
}
</style>
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="#part_1">Start</a></li>
<li><a href="#part_2">HTML</a></li>
<li><a href="#part_3">CSS</a></li>
<li><a href="#part_4">JS</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 & Gestaltung)</li>
<li><a href="#part_4">JavaScript</a> legt fest, was <strong>passieren</strong> soll. (interaktive Elemente) .</li>
</ul>
<p style="text-align: center"><img src="https://wiki.selfhtml.org/images/7/78/HTML-CSS-JS.svg" alt="Trennung von Zuständigkeiten - Separation of Concerns" width="500"></p>
</section>
<section id="part_2" tabindex="2">
<h2>HTML</h2>
<p><img class="logo" loading="lazy" src="https://wiki.selfhtml.org/images/3/38/HTML5_Logo.svg" width="200" alt="HTML5-Logos">Eine solche Auszeichnungssprache hat die Aufgabe, die logischen
Bestandteile eines textorientierten Dokuments zu beschreiben.</p>
<p>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>
<div class="clear">
<svg id="html_example" viewBox="0 0 1000 500">
<rect width="1000" height="500" fill="#ccc"/>
<rect width="960" height="40" y="40" x="20" fill="#eee"/>
<rect width="960" height="40" y="90" x="20" fill="#eee"/>
<rect width="650" height="290" y="140" x="20" fill="#eee"/>
<rect width="960" height="40" y="440" x="20" fill="#eee"/>
<rect width="290" height="290" y="140" x="690" fill="#eee"/>
<rect width="610" height="240" y="180" x="40" fill="#ccc"/>
<rect width="570" height="120" y="290" x="60" fill="#eee"/>
<g font-family="monospace" font-size="36" fill="black" white-space="pre" text-anchor="middle">
<text x="500" y="32"><body></text>
<text x="500" y="72"><header></text>
<text x="500" y="122"><nav></text>
<text x="345" y="172"><main></text>
<text x="345" y="212"><article></text>
<text x="345" y="322"><section></text>
<text x="835" y="172"><aside></text>
<text x="500" y="472"><footer></text>
</g>
</svg>
</div>
</section>
<section id="part_3" tabindex="3">
<h2>CSS</h2>
<p><img class="logo" loading="lazy" src="https://wiki.selfhtml.org/images/6/62/CSS3_logo.svg" width="200" alt="CSS-Logos"></p>
<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><pre><code>Überschrift {
Schriftgröße: 170%;
Abstand-unten: 1 Schriftgröße;
Rahmenfarbe-oben: grün;
Rahmenart-oben: doppelt
}</code></pre></p>
<p><span style="font-size: 1.5em">Grö</span><span style="font-size: 2.5em">ßen</span></p>
<p><span style="font-family: serif">Schrift</span><span style="font-family: monospace">arten</span></p>
<p><span style="font-weight: bold">St</span><span style="font-style: italic">ile</span></p>
<p><span style="color: red">Far</span><span style="color: green">ben</span></p>
<p style="text-decoration: underline">Unterstreichungen</p>
<p style="border: thin dotted blue">Rahmen</p>
</section>
<section id="part_4" tabindex="4">
<h2>JavaScript</h2>
<p><img class="logo" loading="lazy" src="https://wiki.selfhtml.org/images/7/76/JavaScript_Logo.svg" width="200" alt="Logo JavaScript">JavaScript hat Zugriff auf das Browserfenster und das angezeigte HTML-Dokument. Seine Hauptaufgabe ist es, auf Benutzereingaben zu reagieren – etwa Klicks oder Texteingaben – und das aktuelle Dokument im Browser zu verändern.</p>
<p>Diese Änderungen betreffen Inhalt oder Darstellung und machen Webseiten interaktiv und dynamisch.</p>
<!-- JavaScript Beispiel -->
<div class="clear">
<div id="js_example">
<p>Play / Pause: <button id="js_play">❙❙</button></p>
<div id="js_universe">
<svg id="js_solar_system" viewBox="-100 -100 200 200">
<circle id="js_sun" cx="0" cy="0" r="25" fill="#FFF078" />
<circle id="js_earth" cx="80" cy="0" r="12" fill="#3C5AFF" />
</svg>
</div>
</div>
</div>
</section>
<section id="part_5" tabindex="5">
<h2>SVG</h2>
<p><img class="logo" loading="lazy" src="https://wiki.selfhtml.org/images/4/4f/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>
<p style="margin-top: 2em; text-align: left;">
<img src="https://wiki.selfhtml.org/images/a/a2/SMIL-Icon.svg" width="30" alt="Icon">
<img src="https://wiki.selfhtml.org/images/a/a2/SMIL-Icon.svg" width="60" alt="Icon">
<span style="display: inline-block; margin-top: 0.5em; width: 200px; height: 160px; background-image: url(https://wiki.selfhtml.org/images/a/a2/SMIL-Icon.svg); background-size: 250%; background-position: -300px -160px"></span> </p>
</section>
<button id="backToTop" aria-label="zum Seitenanfang" title="zum Seitenanfang">▲</button>
<script>
"use strict";
// Navigation mit aria-current markieren
document.addEventListener("DOMContentLoaded", () => {
const sections = document.querySelectorAll("section");
const navLinks = document.querySelectorAll("#navigation a");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const id = entry.target.getAttribute("id");
const link = document.querySelector(`#navigation a[href="#${id}"]`);
if (entry.isIntersecting) {
navLinks.forEach(l => l.removeAttribute("aria-current"));
link.setAttribute("aria-current", "location");
}
});
}, {
threshold: 0.5
});
sections.forEach(section => observer.observe(section));
});
// Bei Klick in die Navigation Eintrag in der Browser-History unterdrücken //
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('#navigation a').forEach(a => {
a.addEventListener("click", event => {
event.preventDefault();
const id = a.getAttribute("href").substring(1);
const target = document.getElementById(id);
if (target) {
target.scrollIntoView({ behavior: "smooth" });
}
});
});
});
// JS Example
document.addEventListener("DOMContentLoaded", () => {
const earth = document.getElementById("js_earth");
const btn = document.getElementById("js_play");
let run = true;
let a = 0;
function loop() {
if (run) {
a += 0.04;
earth.setAttribute("cx", Math.cos(a) * 80);
earth.setAttribute("cy", Math.sin(a) * 80);
}
requestAnimationFrame(loop);
}
loop();
btn.addEventListener("click", () => {
run = !run;
btn.textContent = run ? "❙❙" : "►";
});
});
// Back to top Button //
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("backToTop");
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
btn.classList.add("visible");
} else {
btn.classList.remove("visible");
}
});
btn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
});
</script>
</body>
</html>
