0

基本的に、パララックス 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})
    }
}
4

1 に答える 1