基本的に、パララックス Web サイトで単純なアニメーションが発生しています。画像の最初のグループがアニメーション化された後 (マージンの移動によってスイープ インとアウト アウト)、TimeOut を使用してそれを削除し、2 番目の画像グループのキューに入れます。正常に動作します。ループするだけです。
$('#slide5').waypoint(function(event, direction) {
if (direction === 'down') {
function runIt() {
$('.img-promo').stop().animate({marginLeft: '30%'},{duration:750})
$('.img-tour').stop().animate({marginLeft: '30%'},{duration:750})
$('.img-distro').stop().animate({marginLeft: '30%'},{duration:750})
$('.img-promo').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
$('.img-tour').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
$('.img-distro').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
setTimeout(function() {
$(".img-promo").hide();
$(".img-tour").hide();
$(".img-distro").hide();
}, 3900);
$('.img-album').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})
$('.img-mastering').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})
$('.img-event').delay(3800).stop().animate({marginLeft: '30%'},{duration:750})
$('.img-album').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
$('.img-mastering').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
$('.img-event').delay(1800).stop().animate({marginLeft: '-40%'},{duration:750})
}
runIt();
}
else {
$('.img-promo').animate({marginLeft: '-90%'},{duration:750})
$('.img-tour').animate({marginLeft: '120%'},{duration:750})
$('.img-distro').animate({marginLeft: '-90%'},{duration:750})
}
}