JS и AJAX ScrollMagic вопрос

Fluber · 10 июл 2017

Вообщем-то сделал скролл контента как на rbc, и есть некоторые баги, почему-то когда скроллю, то при ajax div начинает уходить в родитительский предыдущий элемент, знатоки JS кто знает как такое поправить?

Сам код:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PageScroll Test</title>
    <style>

        .content {
            width: 600px;
            margin: 0 auto;
        }

        .block-news {
            background: rgba(255, 255, 255, 1);
            /*margin-top: -100%;*/
            opacity: 1;
        }

        .news {
            background: rgba(0, 0, 0, 0);
            z-index: 10;
            position: relative;
            padding-top: 0 !important;
            background: #ffffff;
        }



    </style>
</head>
<body>
<div class="content">
    <div class="block-news"><h1>ONE</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
            iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
            quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
            ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
            laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
            deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
            sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
            reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
            numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
            molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
            consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
        <hr>
    </div>
        <hr>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="animation.gsap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script>
    var controller = new ScrollMagic.Controller();
    var processing;

    $(document).scroll(function (e) {

        if (processing)
            return false;

        if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
            processing = true;


            $.post('test.php', function (data) {
                $('.content').html('<div class="block-news">' + data + '</div>');
                $('.content .block-news').each(function () {

                    var $this = $(this);
                    var tween = TweenMax.from($(this), 1, {backgroundColor: "rgba(0,0,0,1)", opacity: 0, ease: Ease.easeNone});
                    var scene = new ScrollMagic.Scene({

                        triggerElement: this,
                        duration: '50%',
                        offset: 100 + "%"

                    })

                        .on("enter", function (e) {
                            $(this).css("z-index", "5");
                        })
                        .on("leave", function (e) {
                            $(this).css("z-index", "9")
                        })
                        .setPin(this , {pushFollowers: 0})
                        .setTween(tween)
                        .addTo(controller)
                        .addIndicators();
                });
                processing = false;
            });

        }


    });

    $('.block-news').each(function () {

        var $this = $(this);
        var tween = TweenMax.from($(this), 1, {backgroundColor: "rgba(0,0,0,1)", opacity: 0, ease: Ease.easeNone});
        var scene = new ScrollMagic.Scene({

            triggerElement: this,
            duration: 70 + "%",
            offset: 100 + "%"

        })

            .on("enter", function (e) {
                $(this).css("z-index", "5");
            })
            .on("leave", function (e) {
                $(this).css("z-index", "9")
            })
            .setPin(this)
            .setTween(tween)
            .addTo(controller)
            .addIndicators();
    });

</script>
</body>
</html>

Демо: http://185.154.52.186/

Войти или зарегистрироваться

JS и AJAX ScrollMagic вопрос

Fluber Активный участник Пользователь

Поделиться этой страницей