Ein Bild ist kein Problem. Der Code funktioniert, aber wie gesagt nur im 2er Block zu je 3 Bilder.
Ein setTimeout function habe ich auch drinnen. Die funktioniert auch, der 2te Block kommt
verzögert ins Bild, aber ich bekomme es nicht hin, jedes Bild einzeln, nacheinander ins Bild zu bouncen.
https://spin.atomicobject.com/2015/05/31/scr…-css-waypoints/
Der Code arbeitet mit animate.css - Funktioniert auch alles, aber ich kriege den Befehl nicht zum Animieren
auf jedes Bild einzeln. .....
https://codepen.io/anon/pen/qKePyJ
Hier ist der HTML-Aufbau anders, aber so soll es ungefähr aussehen...
https://mdbootstrap.com/css/animations/
Wenn man auf der Seite weiter runter scrollt, kommen 6 Bilder, die ins Bild purzeln.
Ich wollte, dass die 6 Bilder nacheinander ins Bild "bouncen"
Ich habe schon alles mögliche an Befehlen ausprobiert, kriege es aber einzeln nicht zum Laufen...
$('#element-to-animate').each(function(k) .......
Wenn ich aber die ID vom Container eingebe, wo die images drinnen sind, funktioniert nichts.
Der Code arbeitet nur, mit Bezug auf den Container <div class="row prop animated">
Wo ist mein Denkfehler.....
Hallo,
ich bin neu hier. Ich versuche, alle Bilder nacheinander zu aktivieren, aber erreiche nur, dass ich 2 Blöcke zu je 3 Bildern gleichzeitig habe.
Ich habe schon alles probiert, aber es will nicht funktionieren. Kann mir bitte jemand einen Tip geben?
<div class="container wayprop">
<div class="row prop animated">
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src="/projects/ p1.jpg"></div>
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=“/projects/p2.jpg"></div>
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=“/projects/p3.jpg"></div>
</div>
<div class="row prop animated">
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src="/projects/p4.jpg"></div>
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=" /projects/p5.jpg"></div>
<div class="col-md-4 animated" id="element-to-animate"><img class="img-responsive" src=" /projects/p6.jpg"></div>
</div>
</div>
$(document).ready(function(){
// hide our element on page load
$('.prop').each(function(index, element) {
$(this).css({
'opacity': 0
});
});
$('.wayprop').waypoint(function() {
$('.prop').each(function(k) {
var el = $(this);
setTimeout(function() {
el.addClass('bounceIn');
}, k * 1000);
});
}, {offset: '70%'});
});
