Manchmal möchte man Videos von erstellten Websites machen, um diese zum Beispiel im eigenen Portfolio lebendiger darstellen zu können. Wir haben ein simples Snippet geschrieben, mit dem sich das realisieren lässt, ohne dass du selbst versuchen musst, möglichst smooth und gleichmässig zu scrollen.
Es handelt sich bei dem Script um ein kleines Bookmarklet, das jede geöffnete Website innerhalb von 8 Sekunden bis zum Footer scrollt. Währenddessen kannst du zum Beispiel ein Bildschirmvideo aufnehmen.
Wenn du die 8 Sekunden anpassen möchtest, dann ändere einfach die «800» im Code-Snippet zu einer Zahl ab, die für deinen Fall besser geeignet ist. 800 entsprechen im Script 8 Sekunden. 300 währen also 3 Sekunden.
Ein Bookmarklet ist ein kleines JavaScript-Programm, das in der Lesezeichenleiste deines Browsers gespeichert wird. Du kannst es verwenden, um bestimmte Funktionen auf einer Website auszuführen. Hier erfährst du, wie du dieses Bookmarklet zu deinem Browser hinzufügen kannst:
- Lesezeichenleiste einblenden: Falls die Lesezeichenleiste deines Browsers nicht sichtbar ist, kannst du sie über das Menü des Browsers einblenden. In den meisten Browsern kannst du sie mit der Tastenkombination
Strg + Umschalt + B
(Windows) oderCmd + Umschalt + B
(Mac) ein- oder ausblenden. - Neues Lesezeichen erstellen: Klicke mit der rechten Maustaste in die Lesezeichenleiste und wähle „Neues Lesezeichen hinzufügen“ (oder ähnliches, je nach Browser).
- Name und URL eingeben:
- Name: Gib dem Lesezeichen einen Namen, z.B. „Smooth Scroll“.
- URL: Kopiere den folgenden Code und füge ihn in das URL-Feld ein:
javascript:(function() {var scrollHeight = document.body.scrollHeight; var scrollStep = scrollHeight / 800; var scrollInterval = setInterval(function() { if (window.scrollY + window.innerHeight < scrollHeight) { window.scrollBy(0, scrollStep); } else { clearInterval(scrollInterval); } }, 10);})();
- Speichern: Speichere das Lesezeichen.
Verwendung des Bookmarklets
- Auf einer beliebigen Seite: Wenn du eine Webseite besuchst und das Bookmarklet verwenden möchtest, klicke einfach auf das neu erstellte Lesezeichen in deiner Lesezeichenleiste. Die Seite wird automatisch innerhalb von 8 Sekunden bis zum Footer heruntergescrollt.