So richtest du Scroll-Positionen auf einer Seite ein

‍Wenn du eine Website mit vielen Abschnitten und einer Menge Informationen erstellst, werden Navigationswerkzeuge doppelt so wichtig. Eines davon ist die Scroll-Position, die selbst eine informationsüberladene Seite zum Vorteil für den Besucher machen kann.

‍Wenn eine einzelne Seite zu viele Informationen enthält und aufgrund kontextueller Einschränkungen nicht weiter unterteilt werden kann, ermöglichen Scroll-Positionen dem Nutzer, sofort zu bestimmten Punkten auf der Seite zu springen und die gewünschten Inhalte aufzurufen. Dieses Beispiel ist eine Seite über ein fiktives 7-tägiges Event mit vielen Bands und zusätzlichen Aktivitäten. Obwohl es sich um ein Vorschau-Design handelt, ist es das ideale Beispiel für Informationsüberladung, die der Betrachter erleben könnte.

‍Wähle einen Button aus, den du in einen Scroll-Übergang verwandeln möchtest, und die On-Click-Option "Gehe zu einer Seite auf dieser Website". Im zweiten Dropdown-Menü, das darunter erscheint, kannst du Scroll-Positionen auswählen. Da du noch keine erstellt hast, wähle "Neue Scroll-Position".

‍Dadurch wird eine horizontale Linie erstellt, die sich entlang der vertikalen Achse ziehen lässt und festlegt, wo der obere Rand des Sichtbereichs des Betrachters durch den Übergang positioniert wird.

‍Die dünne blaue Linie ist die Scroll-Position. Die Positionierung der Seiteninhalte vor und nach dem Abschnitt, den du besuchst, beeinflusst, ob du ein strenges Sichtfeld wählen solltest (bei dem der obere Rand der Perspektive des Betrachters genau an dem Punkt liegt, an dem der Abschnitt beginnt, den er aufrufen möchte) oder davor etwas Platz lässt, für einen weniger strengen Eindruck. Wenn Elemente des vorherigen Abschnitts in das Sichtfeld hineinragen, kann das Ergebnis unbeholfen wirken. Die richtige Platzierung der Scroll-Position lässt Luft zum Atmen und wirkt sauber:

‍In diesem Beispiel können die unten gezeigten Künstler angeschnitten werden, aber da der obere und wesentliche Teil ihrer Porträts sichtbar ist, entsteht Interesse und die Aufmerksamkeit wird in den nächsten Abschnitt gezogen.