Beispiel:Button-4 autoscroll.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>Button 4 autoscroll</title>
<style>
- root {
--primary: oklch(0.96 0.03 78); --primary-dark: oklch(0.55 0.13 48); --secondary: oklch(0.70 0.10 120); --danger: oklch(0.6 0.2 18); --link-color: oklch(0.62 0.10 249); --radius: .4em; --spacing: 1rem; --font: system-ui, sans-serif;
}
- {
box-sizing: border-box;
}
body {
max-width: 55em; margin: 0 auto; font-family: var(--font); background: var(--primary); color: var(--primary-dark); line-height: 1.5; padding: 0.5em;
}
.btn {
font-size: 1.1em; background: rgb(255 255 255 /.2); border-radius: 0 var(--radius) var(--radius); padding: 0.9em 1.4em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: all .2s ease, color .2s ease; backdrop-filter: blur(6px); border: thin solid rgb(255 255 255 /.4);
}
.btn-primary {
--hue: var(--primary-dark);
}
.btn-secondary {
--hue: var(--secondary); border-color: oklch(0.5 0.1 120);
} .btn-danger {
--hue: var(--danger); border-color: oklch(0.4 0.2 18);
} .btn:hover, .btn:focus {
background: color-mix(in oklch, white, var(--hue)); color: color-mix(in oklch, black, var(--hue)); --shadow-strength: 35%; box-shadow: 0 .25rem .5rem color-mix(in oklch, var(--hue) var(--shadow-strength), transparent);
}
.btn-ghost {
--hue: var(--link-color);
}
.product {
position: relative; /* essential! */ display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem;
} .product img {
width: 100%; display: block; border-radius: var(--radius);
} .product .span3 {grid-column: 1 / -1;}
.actions {
position: sticky; width: max-content; max-width: 100%; margin: 0 auto; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding: .6rem .9rem; background: rgb(255 255 255 / 0.25); backdrop-filter: blur(10px) saturate(1.4); border-radius: .8rem; border: 1px solid rgb(255 255 255 / 0.4); box-shadow: 0 .3rem .8rem rgb(0 0 0 / .2); z-index: 10;
} .actions button {
flex: 1;
}
.cart {
background: white; padding: var(--spacing); border-radius: var(--radius); border: thin solid; display: grid; gap: 1rem;
}
.cart-item {
display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing); border-bottom: thin solid;
}
footer {
margin-top: calc(2 * var(--spacing)); padding: var(--spacing); text-align: center; font-size: 1em; color: black;
}
header {
height: 5em; padding: 0 1em; margin-bottom: 1em; display: grid; grid-template-columns: 6em 1fr 1fr;
}
header p:first-of-type{
font-size: 2em; font-weight: bold; line-height: 1;
}
header p:last-of-type {
transform: rotate(-10deg); border: thin solid; padding: 0.5em; border-radius: 0.2em; align-self: end; max-width: 14em;
}
header #backlink {
display:inline-block; text-shadow: none; color: transparent; background: url(https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg); background-size: contain; background-repeat: no-repeat; width: 5em; height: 3em; margin-top: 1em;
}
h1 {
line-height: 1.2;
}
</style>
<script> "use strict";
document.addEventListener("DOMContentLoaded", function () {
const ok = window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
if (!ok) return;
let speed = 4;
let direction = 1;
let pause = 1000;
let paused = false;
let userPaused = false;
function pauseThen(next) {
paused = true;
setTimeout(() => {
paused = false;
next();
}, pause);
}
function step() {
if (paused || userPaused) return;
window.scrollBy(0, direction * speed);
const doc = document.documentElement;
const atBottom =
window.innerHeight + window.scrollY >= doc.scrollHeight - 1;
const atTop =
window.scrollY <= 1;
if (atBottom) {
direction = -1;
return pauseThen(() => requestAnimationFrame(step));
}
if (atTop) {
direction = 1;
return pauseThen(() => requestAnimationFrame(step));
}
requestAnimationFrame(step);
}
setTimeout(() => requestAnimationFrame(step), pause);
function toggleUserPause() {
userPaused = !userPaused;
if (!userPaused && !paused) {
requestAnimationFrame(step);
}
}
document.addEventListener("mousedown", toggleUserPause);
document.addEventListener("touchstart", toggleUserPause, { passive: true });
}); </script>
</head> <body>
<header> <a id="backlink" href="/"></a>
Schreinerei Meier
Ihre Werkstatt für gutes Wohnen!
</header> <nav>
- <a tabindex="0" aria-current="page">Startseite</a>
- <a href="./Beispiel:Preise-4.html">Unsere Preise</a>
- <a href="./Beispiel:Inhalt-4.html">Bilder von unseren Produkten</a>
</nav>
Willkommen bei der Schreinerei Meier im Internet!
<button class="btn btn-primary">🛒 zum Warenkorb </button>
<button class="btn btn-secondary">für später merken</button>
<button class="btn btn-ghost">❤ Wunschzettel</button>
Sehen Sie sich unsere Auswahl an:
<main>
<section class="product"> <img src="https://wiki.selfhtml.org/images/d/dc/Rocking-chair.svg" alt="Schaukelstuhl aus rotem Kirschbaumholz; Shaker-Style"> <img src="https://wiki.selfhtml.org/images/3/3c/Chair.svg" alt="Stuhl aus Vollholz"> <img src="https://wiki.selfhtml.org/images/0/0f/Cabinet.svg" alt="Kommode mit 2 Türen in hellem Holz"> <img src="https://wiki.selfhtml.org/images/a/ad/Dresser.svg" alt="Kommode mit 6 Schubladen in hellem Holz"> <img src="https://wiki.selfhtml.org/images/d/dd/Filing-cabinet.svg" alt="Aktenschrank mit 2 Auszügen"> <img src="https://wiki.selfhtml.org/images/5/54/Table.svg" alt="Tisch mit einer Besteckschublade"> <img class="span3" src="https://wiki.selfhtml.org/images/7/74/Cupboard.svg" alt="Kleiderschrank, dreimal 2-türig, mit 4 Schubladen im Mittelteil"> <img class="span3" src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch mit Unterschrank"> </section>
</main>
<footer>
© 2025 SELFHTML
</footer>
Klicken oder tippen, um Autoscroll zu pausieren.
</body> </html>
