Vorheriger Artikel Nächster Artikel

Webseiten-Elemente mit Javascript fokussieren und erklären

Will man eine Webseite vorstellen oder erklären gibt es dazu schönere und praktischere Wege als reinen Fließtext. Wir stellen hier zwei kostenlose Javascript-Tools vor, mit denen sich einfach und elegant Anmerkungen, Beschreibungen und Tooltipps für eine Webseite erstellen lassen: intro.js und Chardin.js.

Webseiten-Elemente mit Javascript fokussieren und erklären

Wenn eine Webseite erklärt oder vorgestellt werden soll

Prinzipiell sollte eine Webseite zwar immer selbsterklärend sein, um den User nicht zu überfordern, nichtsdestotrotz kann es Situationen geben, in denen eine kleine Vorstellung oder Einführung für den User hilfreich ist. Genau in diesem Fall sind die beiden Javascript-Tools Intro.js und Chardin.js hilfreiche Werkzeuge.

Intro.js hilft beim Erstellen sogenannter Javascript-Intros. Dabei werden einzelne Bereiche einer Webseite fokussiert und erklärt.

Intro.js: Einfache Kennzeichnung von HTML-Elementen

Mit Intro.js lassen sich auf simpelste Weise HTML-Elemente für ein Javascript-Intro markieren. Beim Aufrufen der Webseite werden dann die vorher gekennzeichneten Bereiche hervorgehoben, indem der Rest der Seite abgedunkelt wird, außerdem können die Bereiche mit nützlichen Tooltips versehen werden. Mithilfe einer kleinen Navigation kann zwischen den einzelnen Bereichen und ihren Tooltipps hin- und her navigiert werden. Intro.js ist das Projekt eines 20-jährigen, iranischen Programmierers und über github kostenlos und frei verfügbar.

intro.js: Mit kleinen Tooltips und Navigations-Buttons kann die gesamte Webseite erkundet werden.

Chardin.js: Minimalistisches jQuery-Plugin

Optisch noch etwas minimalistischer kommt das jQuery-Plugin Chardin.js daher. Hier wird die gesamte Seite abgedunkelt, und lediglich die kleinen Tooltipps stehen im Zentrum der Aufmerksamkeit. Eine Navigation zwischen mehreren Elementen ist bei Chardin nicht vorgesehen. Auch dieses Script ist kostenlos auf github erhältlich.

Chardin.js ist bei der Optik noch etwas minimalistischer als Intro.js.

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von DerFreeman am 08.04.2013 (14:49 Uhr)

    "Selbsterklärend" ist ein Mythos! Nach meinen Erfahrungen gitb es IMMER jemanden, der selbst dagegen resistent ist.

    Antworten Teilen
  2. von Thomas am 08.04.2013 (15:25 Uhr)

    Nette Spielerein! Allerdings find ich solche overlays zum Teil eher abschreckend! Vorallem wenn sie dazu genutzt werden, sich mit jener Seite auf FB zu "vernetzen"

    PS: kleiner Typo im Link von "Chardin.js auf gIthub"

    Antworten Teilen
  3. von SeV am 08.04.2013 (16:39 Uhr)

    Hab Intro.js letztens auch schon mal eingesetzt und muss sagen es ist ein tolles Plugin mit dem man schnell Ergebnisse darstellen kann. Leider hakt hier und da die Bedienung und man sollte immer die Position der Overlays nachkontrollieren.

    Ich nutze es primär als interaktive Bedienungsanleitung auf meinen Webtools und habe es in mein Portfolio mit aufgenommen.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr … » weiterlesen

Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein
Freies JavaScript-Framework am Ende: Yahoo stellt Arbeit an YUI ein

Yahoo wird mit sofortiger Wirkung die Arbeit am quelloffenen YUI-Framework einstellen. Als Gründe nannte der Konzern ein gesunkenes Interesse von Seiten der Community und die stark veränderte … » weiterlesen

Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick
Tolle JavaScript-Datenbank: Die besten Libraries, Frameworks und Plugins im Überblick

JSDB.io fungiert als Datenbank der besten JavaScript-Libraries im Netz. Dank sinnvoller Unterkategorien findet ihr hier schnell, wonach ihr sucht. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen