Die animierte Überschrift auf der Website mit einer ausgefallenen Schrift

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie wurde auf der Website die Überschrift webdesign klamonfra animiert?

02Mär2014

Die animierte Überschrift auf der Startseite mit einer ausgefallenen Schrift


Die Überschrift einer Startseite sollte ins Auge fallen und den Besucher dazu veranlassen sich auf der Website weiter umzusehen.
Hierfür habe ich mir eine besondere Schriftart ausgesucht und das Ganze noch ein wenig mit CSS3 (Cascading Style Sheet)-Mitteln animiert.
Dank der von Google kostenlos zur Verfügung gestellten Schriftarten, kann man auf eine große Auswahl von eleganten Schrifttypen zurückgreifen. Der Vorteil ist, dass dieser Schrifttyp nicht auf den Rechnern der Besucher einer Website installiert sein muss. Google Web Fonts ist eine Sammlung von optimierten Schrifttypen für die eigenen Webseiten, und das einfache Einbinden dieser Schriftarten ist dabei ein weiterer Vorteil!

Die Anweisung zum Laden des neuen Schrifttyps erfolgt im "<head>-Bereich" einer Webseite und sollte noch vor dem Aufruf des eigenen "Stylesheets" geschehen. In der Regel sieht das Einbinden wie folgt aus:

<link rel="stylesheet" type="text/css"
  href="http://fonts.googleapis.com/css?family=Tangerine">

Nun kann die Schriftart, in meinem Fall "Tangerine", überall in der eigenen CSS (Cascading Style Sheet)-Datei verwendet werden.


Damit komme ich zur Beschreibung meiner Animation. Zuerst schreibe ich die Überschrift "webdesign klamonfra" und "professionelle und barrierefreie Webgestaltung" wie folgt in HTML (HyperText Markup Language):

<h2 class='modern1'>
    <span>webdesign</span>
    <span>klamonfra</span>
</h2>

<h2 class="modern2">
    professionelle und barrierefreie Webgestaltung
</h2>

Durch die beiden "<span>-Elemente" sind die Wörter voneinander getrennt und ich kann sie einzeln animieren. Das kann man auch für einzelne Buchstaben, wie weiter unten beschrieben, nutzen.

Wichtig für die Animation ist das Versetzen vom "top-" und "left-Element". Aus diesem Grund ist auch im eigentlichen "<span>-Element" das "top-" und "left-Element" jeweils auf 0 gesetzt! Seit November 2014 habe ich aber die Schriftart auf "Comic Sans" umgestellt. Das CSS (Cascading Style Sheet) sieht also wie folgt aus:

h2.modern1 span,
h2.modern2 {
    font: italic bold 1.5em 'Comic Sans MS';
}

h2.modern1 span {
    position: relative;
    margin: 0 auto;
    color: #5f5f5f;
    top: 0;
    left: 0;
    padding: .2em;
    text-shadow: 3px 8px 3px #999;
    cursor: crosshair;
    transition: .3s linear;
}

h2.modern1 span:hover,
h2.modern1 span:focus {
    color: #497cab;
    top: 4px;
    left: 2px;
    text-shadow: 2px 5px 1px #101010, 1px 1px 0 #505050;
}

h2.modern2 {
    text-align: center;
    margin: 1em;
    color: #497cab;
    text-shadow: 3px 4px 3px #999;
}

webdesign klamonfra

Beim Überfahren mit dem Mauszeiger bilde ich den Schatten schärfer ab, versetze die beiden Wörter um 4px nach unten und 2px nach rechts, näher auf den Schatten zu, und wähle eine andere Schriftfarbe. Durch den Befehl der "transition" sorge ich schließlich dafür, dass die Veränderungen linear und innerhalb von 0,3 Sekunden erfolgen.


Für die Website von Monika & Klaus habe ich jeden einzelnen Buchstaben wie folgt animiert.
Zuerst schreibe ich den Schriftzug "Monika & Klaus" in den Kopf-Bereich einer Seite:

<div id='monkla'>
    <span>M</span>
    <span>o</span>
    <span>n</span>
    <span>i</span>
    <span>k</span>
    <span>a</span>
    <span> & </span>
    <span>K</span>
    <span>l</span>
    <span>a</span>
    <span>u</span>
    <span>s</span>
</div>

Durch die jeweiligen "<span>-Elemente" sind dieses Mal die Buchstaben voneinander getrennt und ich kann sie genau so einzeln animieren wie oben beschrieben.
Das CSS (Cascading Style Sheet) sieht wie folgt aus:

#monkla span {
    font: italic normal 3.5em 'Comic Sans MS';
    position: relative;
    color: #c93;
    top: 0;
    text-shadow: 3px 15px 8px #101010;
    cursor: crosshair;
    transition: .3s linear;
}

#monkla span:hover,
#monkla span:focus {
    color: #00f;
    top: 10px;
    text-shadow: 3px 5px 1px #101010, 1px 1px 0px #505050;
}
Monika & Klaus

Damit ist auch diese schöne Animation erfolgreich umgesetzt worden.

Zum Seitenanfang springen Λ