用户滚动时节闪烁

时间:2018-10-28 11:02:05

标签: javascript jquery html scroll scrollmagic

我在用户滚动时使用我网站上的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 个答案:

没有答案
相关问题