Demo: Bootstrap 3 Thumbnail Caption Animation mit animate.css

Hier ein paar Beispiele zu unten stehenden Blogartikel. Neben den im Blogartikel besprochenen Beispiel sind hier auch erweiterte Varianten zu finden, die nicht nur ein HTML Element mit einbeziehen.

Zum Blogartikel »

Credits: sevenX.de animate.css


Hier ein paar ganz einfache Anwendungsbeispiele mit gleichem In/Out Effekt
Slide In/Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("slideOutLeft").addClass("slideInLeft").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("slideInLeft").addClass("slideOutLeft");
});
Flip In/Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("flipOutX").addClass("flipInX").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("flipInX").addClass("flipOutX");
});
Fade In/Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("fadeOutUp").addClass("fadeInDown").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("fadeInDown").addClass("fadeOutUp");
});

Man kann natürlich auch verschiedene Effekte mixen, so dass das Ganze noch etwas dynamischer ausschaut.
Bounce In / Rotate Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("rotateOut").addClass("bounceIn").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("bounceIn").addClass("rotateOut");
});
LightSpeed In / Flip Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("flipOutY").addClass("lightSpeedIn").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("lightSpeedIn").addClass("flipOutY");
});
Roll In/ LightSpeed Out

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("lightSpeedOut").addClass("rollIn").show();
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("rollIn").addClass("lightSpeedOut");
});

Man kann natürlich auch mehrere Elemente gleichzeitig animieren. Man muss dazu nur dem zu animierenden HTML Element die "class="animated" hinzufügen und entsprechend den JQuery Code erweitern.
Full Feature Animation

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
HTML Code Ergänzung
            	
<h4 class="animated">Das ist eine Überschrift</h4>
<p class="animated">Kurze Beschreibung...</p>
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("rollOut").addClass("rollIn").show();
        $(this).find('.caption h4').addClass("slideInLeft");
        $(this).find('.caption p').addClass("slideInRight");
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("rollIn").addClass("rollOut");
        $(this).find('.caption h4').removeClass("slideInLeft");
        $(this).find('.caption p').removeClass("slideInRight");
});
Animierte Button Links

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
HTML Code Ergänzung
            	
<h4 class="animated">Das ist eine Überschrift</h4>
<p class="animated"><a href="" class="label label-danger" rel="tooltip" title="Vergrößern">Zoom...</p>
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("rotateOut").addClass("bounceIn").show();
        $(this).find('.caption h4').addClass("rotateIn");
        $(this).find('.caption p').addClass("bounceInUp");
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("bounceIn").addClass("rotateOut").hide();
        $(this).find('.caption h4').removeClass("rotateIn");
        $(this).find('.caption p').removeClass("bounceInUp");
});
Thumbnail Hintergrund Animation

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
HTML Code Ergänzung
            	
<img class="animated" src="../img/thumbnail.jpg" alt="...">
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("rollOut").addClass("rollIn").show();
        $(this).find('img').addClass("rollOut");
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("rollIn").addClass("rollOut");
        $(this).find('img').removeClass("rollOut").addClass("rollIn");
});
Alle 3 zusammen :)

Das ist eine Überschrift

Kurze Beschreibung zum Bild oder Projekt

Zoom Download

...
HTML Code Ergänzung
            	
<h4 class="animated">Das ist eine Überschrift</h4>
<p class="animated">Kurze Beschreibung...</p>
<p class="animated"><a href="" class="label label-danger" rel="tooltip" title="Vergrößern">Zoom...</p> 
<img class="animated" src="../img/thumbnail.jpg" alt="...">
jQuery
            	
$( ".thumbnail" )
    .mouseenter(function() {
        $(this).find('.caption').removeClass("hinge").addClass("fadeIn").show();
        $(this).find('.caption h4').addClass("slideInLeft");
        $(this).find('.caption p').addClass("bounceInUp");
        $(this).find('img').addClass("pulse");
    })
    .mouseleave(function() {
        $(this).find('.caption').removeClass("fadeIn").addClass("hinge");
        $(this).find('.caption h4').removeClass("slideInLeft");
        $(this).find('.caption p').removeClass("bounceInUp");
        $(this).find('img').removeClass("pulse");
});