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 KAMERAFAHRT ( CSS-Name: backposmovie-1-bis-4b)| startet automatisch
  • Animation ZOOM-IN, Vergrösserung läuft innerhalb der Box ab ( CSS-Name: bigscale )
  • Animation PERSPEKTIVISCHES WENDEN auf Y-Ebene ( CSS-Name: wenden )
  • Animation PERSPEKTIVISCHES WENDEN auf X-Ebene ( CSS-Name: wenden2 )
  • Animation PERSPEKTIVISCHES WENDEN auf X + Y Ebene ( CSS-Name: flip-perspektiv | startet automat. )
  • Animation SLIDE-RIGHT + FARBÄNDERUNG ICON ( CSS-Name: slide-right )
  • Animation DREHEN, schnell ( CSS-Name: drehen )
  • Animation DREHEN, langsam ( CSS-Name: drehen2 )

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 rot 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="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).


(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 ist die Schrift '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-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. je nach Template auch in Listen oder die Navigation eingearbeitet. Achten Sie hier dementsprechend in der Datei "format.css" auf die css-Klassen mit ".fa"

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




CSS-Overflow hält Spalten konstant

Ordnet man die Spalten mit float an, gibt es zwei Möglichkeiten um ein Zusammenbrechen der Spalten bei unterschiedlich langem Inhalt/Text zu verhindern.

1.) Man gibt keine Höhe an und schreibt in jede Box ungefähr gleich langen Text. Das ist am einfachsten und man muss kein CSS-overflow angeben.

2.) Man gibt eine bestimmte feste Höhe für die Boxen an und vergibt zudem die Angabe "overflow:auto". Ist der Text dann länger als die vorgegebene Höhe, so erscheint für die Box eine Scroll-Leiste un der überstehende Inhalt kann trotzdem gelesen werden. Bei diesem Template haben wir bei den Boxen, bei denen der Text unter den Bilder länger als eine Zeile ist, die letztgenannte Möglichkeit verwendet. Wir erkären es kurz wie folgt:

Da wir den Quelltext mobile-first anordnen, d.h. der Code für die kleinen Auflösungen steht am Anfang, benötigen wir hier noch keine Höhe und auch kein CSS-Overflow, da alle Boxen mit einer Breite von 100% einfach untereinander stehen.
.bilder .text {display:block;}

Bei den Media Qeries, also den Abfragen für die Auflösung des Bildschirms, geben wir dann eine Höhe sowie auch "overflow:auto" an.
@media (min-width: 600px) {
.bilder .text {
overflow:auto;height:12rem;}}
@media (min-width: 768px) {
.bilder .text {
overflow:auto;height:10rem;}}
@media (min-width: 1024px) {
.bilder .text {
overflow:auto;height:12rem;}}



Social Media | 1

4er-Gruppe - Icons Big - Farbe Vers1



Facebook


Twitter


Youtube


Google +




Social Media | 2

6er-Gruppe - Icons Medium - Farbe Vers2





Kontakt

6er-Gruppe - Icons Small - Rund - Farbe Vers1





Check Out

4er-Gruppe - Icons Medium - Farbe Vers3

© 2020 | Über den Wolken am Meer