Question

我在用户滚动时使用我网站上的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); 
});

用户滚动时节闪烁

0 个答案: