Anzeige
Tutorialbeschreibung

Webseiten-Effekte mit Animate.css

Webseiten-Effekte mit Animate.css

Früher wurden Animationen für Webseiten in Form einer GIF-Datei oder via Flash realisiert. Heute ist es dank CSS3 möglich, Animationen ohne externe Hilfsmittel zu erstellen. Doch oft ist der Code wegen der Keyframes und Präfixe (-webkit-, -moz-, etc.) zu lang und unübersichtlich, sodass man hier und da mal einen Fehler macht. Aus diesem Grund hat sich Daniel Eden die Mühe gemacht und Animate.CSS entwickelt. Was Animate.CSS ist und was es genau kann, erfahrt ihr im folgenden Tutorial.


Animate.css - der „Klassen-Streber“

Das Schöne an Animate.css ist die unkomplizierte Integrierung in die eigene Webseite, denn wie der Name schon erahnen lässt, handelt es sich bei Animate.css um eine einfache CSS-Datei mit bereits vordefinierten Klassen, die entsprechende Animationen erwirken sollen.

Bilder



Die Klassen sind hierbei relativ übersichtlich und können bereits auf der offiziellen Animate.css-Seite ausprobiert werden. Dazu muss man einfach nur die jeweilige Klasse auswählen und anschließend auf den Animate it-Button klicken, um sich den jeweiligen Effekt demonstrieren zu lassen. Man hat hierbei die Wahl zwischen bounce, flash, pulse und 59 weiteren Effekten. Auf diese Weise kann man beispielsweise eine Box reinfliegen oder einen Text rotieren lassen. Auch die Integrierung der Animate.css-Datei ist relativ einfach. Man geht wie bei jeder Webseitenerstellung gleichermaßen vor, bindet die Datei mit dem LINK-Element ein und gibt als „href“ die Datei „animate.css“ an:

<link rel=“stylesheet“ href=“animate.css“>


 

Die Praxis macht es!

Animationen mithilfe von Animate.css zu realisieren, ist an sich keine große Herausforderung. Doch manchmal hilft es, wenn in einem Praxis-Beispiel die Verwendung veranschaulicht wird.

In diesem Beispiel wollen wir einer imaginären Suchmaschine mithilfe von Animate.css ein wenig Pep verleihen. Diese hört auf den Namen „Meine Suche“ und besteht aus ganz einfachen Elementen, wie ihr auch rechts sehen könnt.

Dementsprechend benötigt ihr einen HTML-Editor, beispielsweise Adobe Dreamweaver, Adobe Brackets oder Blue Griffon. Öffnet den Editor eures Vertrauens und erstellt eine HTML-Datei mit dem Namen „index.html“. Falls bereits Angaben vorhanden sind, löscht diese einfach und fügt folgenden Code ein.

<!doctype html>
<html>
<head>
<meta charset=“utf-8“>
<title>Meine Suche</title>
<link rel=“stylesheet“ href=“style.css“>
<link href=‘http://fonts.googleapis.com/css?family=Alex+Brush‘ rel=‘stylesheet‘ type=‘text/css‘>
<link href=‘http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,‘ rel=‘stylesheet‘ type=‘text/
css‘>
</head>
<body>
<h1>Meine Suche</h1>
<form action=“#“ method=“post“ name=“meinesuche“ id=“meinesuche“>
<input type=“text“ name=“suche“ placeholder=“Sie suchen nach...“ id=“suche“>
<input type=“submit“ name=“submit“ id=“submit“ value=“Suchen“>
</form>
</body>
</html>


 
Wenn ihr das erledigt habt, speichert die Datei ab, öffnet eine neue CSS-Datei und fügt die folgenden CSS-Angaben ein:

* {margin:0; padding:0;}
h1 {font-family: ‚Alex Brush‘; font-size:7em; font-weight:300; text-align:center; margin:100px 0 0 0;
color:#FEAC2C;}
#meinesuche {text-align:center; margin:20px 0 0 0;}
#meinesuche #suche,
#meinesuche #submit {font-family: ‚Source Sans Pro‘, sans-serif; font-size:1.125em;}
#meinesuche #suche {width:400px; padding:6px 10px 6px 10px; border:1px solid #5574B4; font-weight:300;}
#meinesuche #submit {padding:6px 10px 6px 10px; color:#FFF; background:#5574B4; border:none; fontweight:
600;}
#meinesuche #submit:hover {background:#263961;}


Speichert die Datei unter den Namen „style.css“ im selben Dateipfad ab, wo sich auch die Datei „index.html“ befindet. Wenn ihr jetzt die Datei „index.html“ mit eurem Browser öffnet, werdet ihr erst mal feststellen, dass unsere Suchmaschine zwar schon fertig gestylt ist, aber noch keine Animationen enthält. Hier kommt nun Animate.css zum Tragen. Denn wir möchten ja gerne, dass unsere Besucher mit zwei kleinen, schicken Effekten begrüßt werden.


 

Nun kommt Animate.CSS ins Spiel!

Wir laden also die Animate.css-Datei herunter und packen diese sogleich in denselben Pfad bzw. Ordner wie die Dateien mit den Namen „index.html“ und „style.css“. Damit nicht genug, möchten wir die Datei natürlich mit einbinden, da wir entsprechend von zwei vorhandenen Klassen Gebrauch machen wollen. Wir öffnen also wieder unsere „index.html“-Datei und fügen, wie im Code-Block rot markiert, die folgenden Anweisungen ein:

<!doctype html>
<html>
<head>
<meta charset=“utf-8“>
<title>Meine Suche</title>
<link rel=“stylesheet“ href=“style.css“>
<link rel=“stylesheet“ href=“animate.css“>
<link href=‘http://fonts.googleapis.com/css?family=Alex+Brush‘ rel=‘stylesheet‘ type=‘text/css‘>
<link href=‘http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,‘ rel=‘stylesheet‘ type=‘text/
css‘>
</head>
<body>
<h1 class=“animated bounceIn“>Meine Suche</h1>
<form action=“#“ method=“post“ name=“meinesuche“ id=“meinesuche“ class=“animated bounceInLeft“>
<input type=“text“ name=“suche“ placeholder=“Sie suchen nach...“ id=“suche“>
<input type=“submit“ name=“submit“ id=“submit“ value=“Suchen“>
</form>
</body>
</html>


Zur Erklärung:

<link rel=“stylesheet“ href=“animate.css“>

Dieser Code sorgt schlicht und einfach dafür, dass die Animate.css-Datei eingefügt wird. Somit können wir von den Klassen dieser Datei Gebrauch machen und sie an entsprechender Stelle einfügen. Ihr werdet im obigen Code-Block mit Sicherheit gemerkt haben, dass bereits zwei Stellen mit entsprechenden Klassen versehen worden sind.

Diese Klassen könnt ihr jetzt in eure „index.html“-Datei übernehmen. Dennoch sollt ihr natürlich nun erfahren, was ihr da eingefügt habt. Zunächst haben wir sowohl im H1-Element als auch im FORM-Element eine Klasse mit dem Namen „animated“ eingefügt. Diese Klasse ist im Prinzip die Grundvoraussetzung, dass eure Animation überhaupt funktioniert, also eine Pflichtangabe. Die jeweils darauffolgenden Klassen mit dem Namen „bounceIn“ und „bounceInLeft“ sind hingegen optional. Wichtig ist natürlich, dass ihr euch für eine entsprechende Klasse bzw. Animation entscheidet und sie anschließend hinter der Klasse „animated“ platziert, da ihr euch sonst zu Recht wundert, warum das von euch ausgewählte Element nicht animiert ist. Daher gilt immer die Faustregel: „animated“ an erster Stelle verwenden und anschließend die entsprechende Animations-Klasse einfügen. Wollten wir, wie in unserem Beispiel, ein H1-Element mit „bounceIn“ animieren, würde das folgendermaßen ausschauen:

<h1 class=“animated bounceIn“>Meine Suche</h1>

Wie bereits am Anfang dieses Tutorials erwähnt, könnt ihr die jeweiligen Klassen auf der offiziellen Animate.css-Seite austesten und euch anschließend aussuchen, auf welche Art und Weise ihr eure Webseite animieren möchtet. Auf diese Art habt ihr einen guten Überblick darüber, wie die jeweiligen Animationen aussehen. Speichert nun eure „index.html“-Datei ab und ruft diese in eurem Browser auf. Falls sich soweit nichts bemerkbar macht, ladet die Seite noch mal neu. Spätestens dann sollten sich die beiden Animationen die ersten Sekunden bemerkbar machen. Euer Ergebnis sollte folgendermaßen (natürlich animiert) ausschauen:

Bilder



Durch den Einsatz von Animate.css haben wir unsere Suchmaschine mit ein paar netten Effekten versehen und haben gleichzeitig auch Akzente gesetzt. Man könnte das Ganze nun weiterspinnen und für eine entsprechende Community Status- oder Pinnwand-Einträge animieren. So würde beim Abschicken des Eintrages eine Animation erfolgen, die den Inhalt anschließend mithilfe von Animate.css und jQuery erscheinen lässt.

Ich hoffe, ihr konntet mit diesem kleinen Tutorial etwas anfangen. :-)

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von picturework
  • 09.06.2015 - 17:37

cool! bringt nach Flash wieder etwas Bewegung ins Web :-)

Portrait von pallasathena
Portrait von Zicke
  • 04.06.2015 - 21:51

Werde ich bei Gelegenheit sicher ausprobieren. Ist wirklich toll, danke.

Portrait von Domingo
  • 04.06.2015 - 21:14

Vielen Dank.

Portrait von Bijostone
  • 04.06.2015 - 20:51

Klasse! Dankeschön für die Tipps und die Daten.

Portrait von Caesarion2004
  • 04.06.2015 - 20:45

Vielen Dank für das informative Tutorial.

Portrait von Dancethi60
  • 04.06.2015 - 20:39

Hallo, habe mir das Tutorial heruntergeladen und werde es demnächst ausprobieren.
Ich bin schon eine Weile auf der suche nach einer Alternativen zu Flash.
Da ich eine Flashdatei in meiner Website eingebunden habe und ich diese aktualisieren möchte, kommt mir dieses Tutorial sehr gelegen. Erst einmal recht vielen Dank für das Angebot.

Portrait von patrick_l
  • 04.06.2015 - 20:35

Die passende Ergänzung zur animate.css wäre wohl die wow.js. Mit allerlei anderer jQuery Spielerei man einiges anstellen kann. Was dein Tutorial angeht: Aufs wesentliche reduziert und leicht nachvollziehbar. Von daher Daumen hoch.

Liebe Grüße, Patrick

Portrait von BOPsWelt
  • 04.06.2015 - 19:19

Vielen Dank für das Tutorial. :)

Portrait von Schulli
  • 04.06.2015 - 19:17

Super, sehr brauchbar. Danke.

Portrait von Kundentest
  • 04.06.2015 - 18:43

Herzlichen Dank für das Tutorial.

Portrait von rocking_sid
  • 04.06.2015 - 18:26

Vielen Dank für das interessante Tutorial!

x
×
×
teststefan