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