Wir schreiben einen Brief mit einer Feder und korrigieren die Fehler

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wir schreiben mit einer Feder einen Brief und korrigieren die Fehler

21Apr2014

Ein von Hand geschriebener Brief per Animation.


Beim Schreiben des alten Briefes nehme ich eine Feder zur Hand. Aber leider trocknet die Tusche sehr schnell aus und beim Schreiben passieren mir leider so einige Fehler.
Diese Idee habe ich bei Script Tutorials gefunden und fand es gut genug, um meinen Besuchern die Animation eines handgeschriebenen Briefes auf dieser Webseite zu präsentieren.

Bei diesem Brief wird der eigentliche Text per CSS (Cascading Style Sheet) versteckt, und mit einem div-Container, der als Hintergrund das alte Papier darstellt, wird die Größe des Briefes festgelegt.
Danach wird jeder Buchstabe einzeln sichtbar geschaltet.
Nach einem Punkt werden 0,3 Sekunden, nach einem Komma 0,2 Sekunden und nach jedem Wort werden 0,1 Sekunden gewartet, bis weiter geschrieben wird.

Als besonderer Effekt werden beim Schreiben ein paar Schreibfehler vorgetäuscht und die Feder muss man immer wieder ins Tintenfass tunken weil die Tinte an der Feder natürlich mit jedem geschriebenen Wort blasser wird.
Im Text wird ein simulierter falscher Buchstabe durch ein "|" zurückgenommen. Bei "Werbung" steht zum Beispiel zuerst "Informat" und die acht falschen Buchstaben werden durch acht senkrechte Striche wieder gelöscht. In HTML (HyperText Markup Language) wird das dann folgendermaßen geschrieben: Informat||||||||Werbung.
Mit jedem Wort wird die Tinte um eine Blaustufe geringer eingestellt, bis dass die Tinte ins weiß übergeht, dann wird die Feder ins Tintenfass getaucht, und die Tinte hat wieder ihre blaue Farbe.

         Gerade in der hei|utigen Zeit ist es immer wichtiger im
         Urlaub||||||Internet vertreten zu sein.

Viele Menschen benutzen Website|||||||das Internet, um sich vorab über einen
bestimmten Dienstleistungszweig zu informieren. Sei es der
nächste Restaurantbesuch, die Inanspruchnahme eines
Handwerkers oder die Suche nach dem nächsten Urlaubshotel|||||domizil.

Ihre Webseite im Internet ist die Informat||||||||Werbung für Ihre
Dienstleistung und Ihr Unternehmen. 24 Stunden am Tag,
weltweit und das alles für vergleichsweise wenig Geld. Und eine
ansprechende Webseite ist hierfür der erste wichtige Baustein,
um neue Kunden zu gewinnen.
Feder zum Schreiben Tintenfass

Damit der Effekt des Feder-Eintauchen realistischer dargestellt wird, habe ich im Gegensatz zum Original, das HTML (HyperText Markup Language) wie folgt geschrieben:

<div id="letter">
</div>
<div id="letter_src">
    Freier Text
</div>
<div id="platz">
    <img id="feder" src="/bilder/feder1.gif" alt="Feder zum Schreiben">
    <img id="tinte" src="/bilder/tintenfass.gif" alt="Tintenfass">
</div>

Auch das CSS (Cascading Style Sheet) habe ich so angepasst, dass der Brief auf dieser Seite eingebunden, und das Tintenfass unter dem Brief platziert wird.

#tinte {
    position: relative;
    top: 31em;
    left: -5em;
    z-index: 1;
}

#feder {
    position: relative;
    top: 26.5em;
    left: 6em;
    visibility: hidden;
    z-index: 2;
}

#letter {
    background: url('/bilder/Brief.png') no-repeat;
    font: bold 1.1em 'Comic Sans MS';
    line-height: 1.5em;
    padding: 70px 0 0 55px;
    margin: 0 auto;
    position: absolute;
    width: 42em;
    height: 31em;
}

#letter_src {
    display: none;
}

#platz {
    width: 42em;
    height: 39em;
}

Bei dem JavaScript (objektorientierte Programmiersprache) habe ich nur die Zeiten und die Textfarbe angepasst und am Ende der Seite eingebunden.

Damit ist ein weiterer visueller Effekt umgesetzt den man auf einer Website an verschiedenen Stellen einsetzen kann. Wir wäre es zum Beispiel mit einem Werbetext der Buchstabe für Buchstabe eingeblendet wird.

Zum Seitenanfang springen Λ