Мерцание раздела во время прокрутки пользователем - PullRequest
Новая
       10

Мерцание раздела во время прокрутки пользователем

0 голосов
/ 28 октября 2018

Я использую ScrollMagic на своем веб-сайте для анимации элементов (например, изображений в div), когда пользователь выполняет прокрутку, и этот раздел не изменяется до завершения анимации.После завершения анимации пользователь может прокрутить вниз до другого раздела.Мой первый раздел в порядке, но когда пользователь переходит ко второму разделу - элемент изображения анимируется, но весь раздел мерцает, и под и под разделом появляются некоторые уродливые пробелы.Думаю, есть какая-то проблема с закреплением, но я не смог ее решить.
Реализация может быть найдена здесь: www.bug.soulmates.company
Просто выделите второй раздел
Кусок HTML: 

<section id="slide1" class="full-width-height-section" style="background-image: url(img/slide1/1.jpg); background-size: 100% 100%; background-repeat: no-repeat; overflow-x: hidden;">
    <div class="container-fluid">
        <h2>
            Heading1
        </h2>
        <p>
            Some text
        </p>
        <div>
            <img id="image1" src="svg/image1.svg">
        </div>
        <div>
            <img id="image2" src="svg/image2.svg">
        </div>
        <div>
            <img id="image3" src="svg/image3.svg">
        </div>
    </div>
</section>

<section id="slide2" class="full-width-height-section" style="background-image: url(img/slide1/1.jpg); background-size: 100% 100%; background-repeat: no-repeat; overflow-x: hidden;">
    <div class="container-fluid">
        <h2>
            Heading2
        </h2>
        <p>
            Some text
        </p>
        <div class="objects">
            <div>
                <img id="image4" src="svg/image1.svg">
            </div>
            <div>
                <img id="image5" src="svg/image2.svg">
            </div>
        </div>
    </div>
</section>

JavaScript: 

$(function() {
    var controller = new ScrollMagic.Controller();

    var move_slide1 = new TimelineMax()
        .to("#image1", 10, {x:500, y:-300, opacity: 0}, 0.2)
        .to("#image2", 10, {x:-500, y:-400, opacity: 0}, 2)
        .to("#image3", 10, {x:-200, y: -300, opacity:0}, 0.5);       

    var scene1 = new ScrollMagic.Scene({
            duration: 3000,    
            offset: 0       
        })
        .setTween(move_slide1)
        .setPin("#slide1") 
        .addTo(controller);       


    var move_slide2 = new TimelineMax()
        .to("#image4", 5, {x:500, y:-300, opacity: 0}, 0.2) 
        .to("#image5", 5, {x:500, y:-300, opacity: 0}, 0.2);

    var scene2 = new ScrollMagic.Scene({
            triggerElement: "#objects",
            duration: 5000,    
            offset: 0        
        });
        scena2.setTween(move_slide2)
        scena2.setPin("#slide2") 
        scena2.addIndicators()
        scena2.addTo(controller); 
});
...