jQuery - Schreibmaschinen-Tutorial

Texteffekte sind eine Besonderheit, für die jQuery eine Menge Möglichkeiten bereithält. So wurden etliche Plugins entwickelt, die darauf zurückgreifen.

Wer für seinen Text mehr Aufmerksamkeit braucht, kann jquery.typewriter.js einsetzen. Das Javascript besteht aus einer abgespeckten Version von jQuery 1.1.1 und einem Codeschnippsel von Jason Frame (onehackoranother.com). So bringt die Datei gerade mal 25 KB mit.

Wir benutzen hier den auffälligen Schreibmaschinen-Effekt.

Im Kopf des HTML-Dokuments wird folgendes notiert (vorausgesetzt natürlich, die Javascript-Dateie liegt im Verzeichnis js):

<script type="text/javascript" src="/js/jquery.typewriter.js"></script>

<script type="text/javascript">
$("#container").schreibmaschine();
</script>

Um unseren Typewriter zu starten benutzen wir den Eventhandler "onload" in Verbindung mit einem unsichtbaren .gif:

<img onload='$("#schreibmaschine").schreibmaschine(); return false;' src="img/blank.gif" width="0" height="0">

Der gewünschte TEXT wird in einen Container gesteckt, der "schreibmaschine" genannt wird.

<div id="schreibmaschine">TEXT</div>

Wichtig: ohne das .gif funktioniert der Typewriter nicht!

Herunterladen können Sie die Dateien hier.

· · PhiloPhax · Lauftext · /mobile-friendly/ · Holzgerlingen-Online · ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464 ·
· Wir berechnen im näheren Umkreis keine Anfahrtskosten. Weder nach Altdorf oder Ehningen, nach Herrenberg, Hildrizhausen oder Schönaich ·

Internet-Agentur