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

Nachstehend sehen Sie eine Auflistung der Animationen, in Klammern nennen wir Ihnen den Namen der entsprechenden CSS-Klasse. Die Animationen laufen bei Mausberührung ab oder starten automatisch (dann haben wir es dazu geschrieben:

Folgende Animationen anbei

  • Animation FAHREN, kleines Auto fährt ( CSS-Name: fahren )
  • Animation SCALE, vergrössern ( CSS-Name: bigscale )
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON ( CSS-Name: slide-right )
  • Animation GUMMIBAND ( CSS-Name: gummi )
  • Animation EINBLENDEN + TEXTÜBERLAGERUNG ( CSS-Name: bildtext-ani )
  • Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene ( CSS-Name: wenden ) |startet automatisch
  • Animation PERSPEKTIVISCHES WENDEN auf X-Ebene ( CSS-Name: wenden2 ) |startet automatisch
  • Animation DREHEN, schnell ( CSS-Name: drehen )
  • Animation DREHEN, langsam ( CSS-Name: drehen2 )
  • Animation DREHEN + VERKLEINERN ( CSS-Name: drehen-verkleinern )
  • Animation WAEHLSCHEIBE ( CSS-Name: waehlscheibe )

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="box 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="box">
<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 "box". Die Klasse "box" 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.

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





Schrift

Webfonts

In diesem Template werden Google Webfonts verwendet. Diese sind ja kostenlos und beliebt. Es sind die Schriften 'Poiret One' und 'Open Sans Condensed', welche direkt im Template integriert sind und somit auch ohne Internet-Verbindung angezeigt werden. Die Schriften haben wir über das HTML Link-Element eingebunden. Wenn Sie diese Schriften nicht verwenden wollen bzw. sich für andere Schriften entscheiden, so nehmen Sie einfach den Link-Verweis aus der HTML-Seite heraus, damit die Schriften nicht geladen werden.
<link rel="stylesheet" href="css/font-poiret-one.css" type="text/css">
<link rel="stylesheet" href="css/font-open-sans-condensed.css" type="text/css">


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:      

Es sind grössere (big), mittlere (medium) und kleinere (small) Icons von uns definiert. Beispiele sehen Sie etwas weiter unten. Die Icons im Kopfbereich, Fussbereich, in Listen und gfls. in der Navigation sind davon unberührt, denn diese habe ihre eigene Definition.


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 der Spalten 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 zum Beispiel je nach Layout und Platz, 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: 25%;}
.span_1_of_4b {width: 50%;}

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 | 1



Facebook


Twitter


Youtube


Google +



Social Media | 2




Kontakt

© 2020 Drive-my-car