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)
• Animation TEXT-ROTATE - Textrotation + diverse Effekte - startet automatisch (auf Slogan am Textende) auf jeder Seite gibt es eine andere Textrotation

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 gelöscht */
<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.

Die Fotoschau (Slideshow)

Wir lassen die Fotoschau auf jeder zweiten Seite rückwärts ablaufen, bei uns sind das die Links namens Primus, Tertius und Quintus. Das macht es noch spannnender. Hierfür nutzen wir den CSS-Befehl "animation-direction", den wir in einer CSS-Klasse angelegt haben.

/* beispiel css /fotoschau rückwärts */
.bild1.reverse {
animation-direction:reverse;}
.bild2.reverse {
animation-direction:reverse;}
.bild3.reverse {
animation-direction:reverse;}
.bild4.reverse {
animation-direction:reverse;}

/* beispiel html /fotoschau rückwärts */
<div class="slideshow bild1 reverse" >&nbsp;</div>
<div class="slideshow bild2 reverse" >&nbsp;</div>
<div class="slideshow bild3 reverse" >&nbsp;</div>
<div class="slideshow bild4 reverse" >&nbsp;</div>

Allgemeine Übersicht zu Animationen

Kurzer Überblick: ANIMATIONEN mit CSS
* * * * *

Es gibt 2 Arten von CSS Animationen, nämlich

(1) CSS TRANSITION

(2) CSS ANIMATION (auch KEYFRAMES-ANIMATION genannt).

Bei einer einfachen Animation wie z.b Drehung um 360grad bei Mouseover (hover) ausgelöst, kann man von aussen nicht erkennen, ob diese mit 1) oder 2) gemacht ist.


(1)=
- Erlaubt nur 2 Zustände, Anfangs- und Endzustand
- Braucht zur Auslösung einen sog. Trigger (z.b.hover oder focus), in der Regel also eine Mausberührung oder Touch.
- Erlaubt keinen Loop (zb. spiele 8x ab), unendlich Abspielen (infinite) aber möglich.


(2)=
- Erlaubt die 2 Zustände (bzw. die  sind Pflicht) wie bei 1), dann jedoch viele mögliche Zustände dazwischen, eben Keyframes, wie beim Film.
- Startet im Gegensatz zu 1) auch automatisch (z.b. foto-slideshow) beim Laden der Seite.
- Loop-Angabe erlaubt


GEMEINSAM (1. und 2.) HABEN BEIDE :
- Zeitangabe für kompletten Durchlauf
- Zeitverzögernung (delay), also starte erst nach X sec
- Geschwindigkeitssteuerung , verschiedene, wie : // starte schnell, ende langsam // starte langsam ende schnell // spiele gleichmässig (linear) ab  o.ä.

Icons

Wir verwenden Font-Icons

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".

Tipps zu den Font-Icons

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. Der nachfolgende Link zum Anbieter zeigt weitere Infos sowie auch eine Übersicht aller Icons: fontawesome

Wie Sie sehen können, haben wir für Sie die Font-Icons schon etwas optimiert bzw. auch in die Navigation eingearbeitet.

Allgemeiner Hinweis dazu:
Ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel:      

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);}

Fotos

Bildgröße

Damit die Bilder im Inhaltsbereich sich responsive anpassen, wird eine maximale Beite und eine automatische Höhe vergeben:

/* CSS */
/* bilder -anpassen der grösse */
img {max-width: 100%;
height:auto;
display:block;
margin:0 auto;
}

Bilder in Spalten

Damit sich die Bilder in Spalten nicht mehr untereinander, sondern wenn gewünscht nebeneinander legen, ist die "float-Angabe" zuständig.

/* CSS */
.col {width: 100%;
margin: 0 auto;
float:left;
}

Breite der Spalten

Die Anzahl der nebeneinander liegenden Spalten wird durch eine Angabe der Breite in Prozent getätigt.
Bei kleineren Auflösungen könnte man durch die Angabe von 100% Breite die Bilder untereinander setzen, denn es ist ja wenig Platz zur Verfügung.

/* CSS */
/* beispiel breite spalten */
.span_1_of_2 {width: 100%;}
.span_1_of_3 {width:100%;}
.span_1_of_4 {width: 100%;}
.span_1_of_4b {width: 100%;}

Bei grösseren Auflösungen stellt man je nach Layout und Platz und Ausgangsgrösse der Bilder, je 2 Bilder nebeneinander (50%), 3 Bilder nebeneinander (33.33%), 4 Bilder nebeneinander (25%) oder bei einer anderen Vierergruppe 2 Bilder nebeneinander (50%) und weitere 2 darunter.

/* CSS */
/* beispiel breite spalten */
.span_1_of_2 {width: 50%;}
.span_1_of_3 {width:33.33%;}
.span_1_of_4 {width: 50%;}
.span_1_of_4b {width: 25%;}

Hinweis: Die Fotos in dieser Vorlage sind von https://picjumbo.com/ (Ausnehmend die Fotos bei "Unser Team"). Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Social Media

Kontakt