Bootstrap 3 Thumbnail Caption Animation mit animate.css – Tutorial

Update zu folgendem Artikel Tutorial: Bootstrap – Thumbnail Hover Caption mit Tooltip Im Gegensatz zu verlinktem Artikel, basiert dieses Tutorial auf Bootstrap 3 und nutzt für die Effekte das animate.css Framework.

animate.css

Dieses Framework nutzt CSS3 Keyframe Animationen und ist Cross Browser kompatibel. Internet Explorer leider erst ab Version 10, deshalb wird es einen kleinen jQuery Hack geben, damit es auch in älteren IE Versionen eine Hover Animation gibt. Mit animate.css kann man Animationen für alle möglichen HTML Elemente erstellen und damit ihr wisst, was das Framework alles kann, hier eine Übersicht aller Effekte. Effekt Demo sowie der Download Link Download animate.css

animate.css verwenden

CSS Datei im Headbereich einbinden. Um ein HTML Element zu animieren, werden zwei Klassen benötigt. Die Klasse “animated” gefolgt vom Namen des Wunscheffekts (im Beispiel “rotateIn”), das wars schon. Mit jedem Aufruf der Seite wird jetzt die Animation ausgeführt. Das Tutorial greift aber speziell die Animation einer Thumbnail Caption auf, wie es oft in diversen Portfolios zu sehen ist.

Einbindung in den Code

Demo

Bootstrap HTML

Bootstrap 3 bietet für Thumbnails bereits fertige Styles. Der <div class=”col-md-4″>..</div>  DIV Container steuert die Anzahl der Spalten. Wir ergänzen den Bootstrap Markup durch einen Caption Container. <div class=”caption animated”>…</div> Dort kommt alles rein, was die Caption beinhalten soll, in meinem Fall eine Überschrift, ein Anlesetext und zwei Button Links. Wie der Codeschnipsel zeigt, wird diesem Container neben der Klasse “caption” auch die Klasse “animated” vergeben, denn die benötigen wir zum Animieren via animate.css auf jeden Fall. Den Effekt steuern wir im weiteren über jQuery. Aber vorab müssen wir noch ein wenig CSS ergänzen, damit sich der Caption Container bei der Animation auch über das Bild legt.

Custom CSS

Wir vergeben der Klasse “.thumbnail” die position=relative, damit wir die Caption absolute und flächenfüllend platzieren können. Das erreichen wir in der Klasse “.caption” mit position=absolute und 100% width/height. Da die Caption erst mit Hover erscheinen soll, müssen wir sie erstmal mit display=none ausblenden. Was wir jetzt noch zum animieren benötigen ist ein wenig jQuery.

jQuery

Die dargestellte Variante bietet ein hohes Maß an Flexibilität, das heißt ich kann unterschiedliche Mouseenter und Mouseleave Animationen benutzen und ich habe die Möglichkeit mit einer kleinen Änderung im jQuery Code den Animations Effekt für alle Thumbnails zu ändern. Hätten wir im HTML Markup bereits den Effekt mit angegeben <div class=”caption animated rotateIn”>…</div> , würde eine Änderung des Effektes bedeuten, dass ich bei jedem Thumbnail die entsprechende Klasse austauschen müsste.

Der jQuery Codes basiert darauf, dass ich bei Mouseenter und Mouseleave die entsprechenden Effekt Klassen austausche. Das erklärt auch, warum die jQuery Kette mit .removeClass beginne. Denn bevor ich den entsprechenden Mouseeffekt hinzufüge muss der zuletzt verwendete Effekt entfernt werden. Beim allerersten Überfahren des Thumbnails mit der Maus, wird .removeClass ignoriert, weil diese Klasse noch nicht hinzugefügt wurde. Die Kette beginnt in dem Fall mit .addClass + Effektname. Mit .show() überschreibe ich die CSS Anweisung display=none, so das die Caption angezeigt wird. Die Anzeige erfolgt jetzt mit dem zuvor per .addClass hinzugefügten Effekt. Verlasse ich nun mit der Maus mein Thumbnail, entferne ich die Mouseenter Effektklasse und füge stattdessen die Mouseleave Effektklasse hinzu. Diese ist jetzt gesetzt, fahre ich nun mit der Maus wieder über mein Thumbnail, muss ich natürlich die zuvor gesetzte Mouseleave Effektklasse entfernen, genau deshalb beginnen wir mit .removeClass.

Demo

Browser Support

Das Framework ist Cross Browser kompatibel. Voll kompatibel? Nein, in einem kleinen Dorf namens Redmond wird noch Widerstand geleistet. Leider funktionieren Keyframe Animationen erst ab Internet Explorer 10, User mit Versionen unter 10 auszuschließen ist momentan noch eine zu hohe Hürde, von daher bedienen wir uns als Notlösung einer reinen jQuery Variante, die auch Nutzer des Internet Explorer 9 oder kleiner mit einer kleinen Animation erfreut.

Internet Explorer 9 und kleiner