Animationen

Hier sind die Animationen hinterlegt

Im Quelltext des Kopfbereiches jeder HTML-Seite ist ein Verweis (href) zur Animations-Datei gelegt. Wir haben diese Datei "animation.css" genannt. Somit ist es möglich, aus jeder HTML-Datei heraus, die Animationen abzurufen bzw. zu steuern.

/* beispiel html /link-verweis zur CSS-Datei */
<link rel="stylesheet" href="animation.css" type="text/css">

Folgende Animationen anbei

• Animation BILDWECHSLER - im Kopfbereich - startet automatisch
• Animation SCHWINGEN + ÄNDERUNG DER HINTERGRUNDFARBE (bei Mausberührung auf den Zitat-Feldern)
• Animation WAEHLSCHEIBE - (bei Mausberührung auf den Icons im Kopfbereich)
• Animation SLIDE-LEFT - (bei Mausberührung auf den Links im Hauptmenü)
• Animation SLIDE-RIGHT + FARBÄNDERUNG ICON (bei Mausberührung auf den Listen im Text)
• Animation GUMMI - (bei Mausberührung auf den runden Fotos bei -Unser Team-)
• Animation FADE-INEinblenden-Effekt + Textüberlagerung (bei Mausberührung auf den Fotos)
• Animation BEBEN - (bei Mausberührung auf dem Homepagnamen)
• Animation PERSPEKTIVISCHES WENDEN (startet automat. auf einem Foto im Text)
• Animation DREHEN (bei Mousover auf Icons im Text)
• Animation DREHEN + VERKLEINERN(bei Mousover auf Icons im Text)

So funktioniert es

Bei Mausberührung auf einigen Objekten, wie z.B. Bilder oder Icons, laufen Animationen ab. Diese funktionieren nur mit CSS und ohnne Javascript. Die Animationen selbst befinden sich in der Datei "animation.css". Dort finden Sie bei Bedarf den Namen der Animation (=die CSS-Klasse) heraus. In der jeweiligen HTML-Datei wird die entsprechende Animation per CSS-Klasse dann aufgerufen. Nachstehend ein Beispiel für die Animation "slide-top":

/* beispiel html /animation slide-top */
<div class="bildbox slide-top">
<img src="images/picture06.jpg" width="900" height="500">
</div>

So löschen Sie die Animation

Entfernen Sie in der jeweiligen HTML-Datei den Namen der CSS-Klasse. In diesem Fall wird der Name "slide-top" (der oben gelb markiert ist) einfach gelöscht. Somit kann die Animation nicht mehr aufgerufen werden. Im Beispiel sieht es dann wie folgt aus:

/* beispiel html /animation geloescht */
<div class="bildbox">
<img src="images/picture06.jpg" width="900" height="500">
</div>

Noch eine Ergänzung

Im vorstehendem Beispiel sehen Sie neben der CSS-Klasse "slide-top" auch noch die CSS-Klasse "bildbox". Die Klasse "bildbox" hat in diesem Falle nichts mit der Animation zu tun, sondern ist wiederum für andere Eigenschaften zuständig. Es ist einfach so, das man auf ein Objekt nicht nur eine CSS-Klasse legen kann, sondern bei Bedarf auch mehrere. Das sollte Sie also zum Verständnis dieses Beispieles nicht stören. Das es sich hierbei um zwei verschiedene CSS-Klassen handelt, erkennt man übrigens an dem Leerzeichen zwischen den beiden CSS-Klassen-Namen.

Icons

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.
Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Transparenz

Transparenz mit CSS rgba

Über der Fotoschau befinden sich zwei transparente Felder, eines in Schwarz (mit der Navigation) und eines in Rot. Bei Bedarf, zum Beipiel wenn in der Fotoschau sehr helle oder sehr dunkle Bilder sind, könnnen Sie die Farbe und die Stärke der Deckkraft ändern.

Hier ein Beispiel für rgba-Transparenz:
background:rgba(0 , 0 , 0 , 0.6);
Die Werte in Klammer setzen sich so zusammen: Die ersten drei Ziffern sind für den RGB-Wert der Farbe, die vierte Ziffer bestimmt die Stärke der Deckkraft. In diese Fall bedeutet es: Farbe Schwarz (0 0 0) mit 60% (0.6) Deckkraft.
Die vierte Ziffer bestimmt also die Transparenzstufe: Von 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz)

/* beispiel css /rgba */

.logobox-a {
background:rgba(0,0,0,.6);}

.logobox-b {
background:rgba(255,0,0,.8);}

Bilder

Hinweis: Die Fotos in dieser Vorlage sind von https://picjumbo.com/. Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Social Media

Service