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!