Anfrage aus Deutschland und kein Bock auf Telefonkosten?

Wir rufen zurück
dubbie - Das key visual der dubb AG

 0/5

Scroll-Bookmarklet

Dieses Bookmarklet hilft dir, wenn du zum Beispiel eine von dir erstellte Website beim Scrollen in deinem Portfolio präsentieren möchtest.

Zum Inhalt springen
Webdesign Nauen / Mann tippt auf Notebook
Geschrieben von

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:

  1. 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) oder Cmd + Umschalt + B (Mac) ein- oder ausblenden.
  2. Neues Lesezeichen erstellen: Klicke mit der rechten Maustaste in die Lesezeichenleiste und wähle „Neues Lesezeichen hinzufügen“ (oder ähnliches, je nach Browser).
  3. 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);})();

  4. 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.
dubbie - Das key visual der dubb AG
Finde Dubbie

Dubbie, die kleine Amsel und unser Keyvisual hat sich in Form von Coins 5 Mal auf unserer Website versteckt. Findest du alle 5, gewinnst du einen kleinen Preis. Also, los geht’s, mach dich auf die Suche und wir drücken die Daumen!