Lasst uns einen Scroll Progress Bar mit HTML & CSS programmieren

von | Okt 28, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS3 - HTML - Webdesign

Inhaltsverzeichnis

Vor allem wenn man einen Blog oder eine Webseite mit viel Text hat, will man seine Leser darauf aufmerksam machen dass der Text noch weiter geht / länger ist. Dafür kann man entweder oben hinschreiben wie lange das Lesen dauert oder man baut einen Scroll Watcher ein. Das ist ein grafisches Element oben oder unten am Browser – Wo ein Querbalken immer breiter wird und 100% ausgefüllt ist wenn bis zum Ende der Webseite / Text runtergescrollt ist.

Ich finde das ein sehr praktische Sache – so weiss ich wie gross eine Webseite oder ein Text ist.

Video

HTML

1
<div class="scroll-watcher"></div>

Video

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.scroll-watcher {
    height: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff700;
    z-index: 1000;
    scale: 0 1;
    transform-origin: left;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
 
}
 
@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert