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