Question

我在我的网站上使用ScrollMagic 2.0.7。我创建了称为“屏幕”的div，它是用户屏幕的大小。除第一个屏幕外，每个屏幕的不透明度均为0。当用户滚动时，我使新屏幕淡入并保持不变，直到出现下一个屏幕。然后下一个屏幕消失并粘住，依此类推。

问题在于当下一个屏幕出现时，固定的屏幕会抖动。这仅在Chrome上发生。

我已经搜索了这个问题，但是还没有找到一个确定的解决方案。

有人可以帮忙吗？

https://newsinteractive.post-gazette.com/summers-past/

HTML代码的一部分：

<div class="screen">
    <div id="fifth" class="img desktop">
        <div class="title-wrap section-title"  >
            <div class="subhead first-subhead " >
                <span class="opacity0">Community pools</span>
            </div>
            <div class="title-wrap" id="swim4-text">
                <div class="subhead-2 white-bg " >
                <h3>1981</h3>
                    Swimmers crowd into a pool on July 8, 1981. (Bill Nevis/Post-Gazette)
                </div>
            </div>
        </div>
    </div>
</div>

<div class="screen desktop" id="fade5"></div>


<div class="screen">
    <div id="sixth" class="img desktop">
    <div class="title-wrap section-title" id="swim5-text">
        <div class="subhead first-subhead " >
            <span class="opacity0">Community pools</span>
        </div>
        <div class="subhead-2 white-bg" >
        <h3>Circa 1962</h3>
            Children wave in the Ammon Center swimming pool. (&copy; Carnegie Museum of Art, Charles "Teenie" Harris archive)
        </div>
    </div>
    </div>
</div>

<div class="screen desktop" id="fade6"></div>

scrollmagic代码的一部分：

var scene = new ScrollMagic.Scene({
                triggerElement: "#fifth",
                duration: height*7, 
                triggerHook: 0, 
                reverse: true 
        })
        .setPin("#fifth").addTo(controller);    
        
        var fadeUp05 = TweenMax.to('#fifth', 1, {opacity: 1}); //fade in 3rd photo
                
        var scene = new ScrollMagic.Scene({ 
            triggerElement: '#fade5'
        })
        .setTween(fadeUp05)
        .addTo(controller);
        
var scene = new ScrollMagic.Scene({
                triggerElement: "#sixth",
                duration: height*7, 
                triggerHook: 0, 
                reverse: true 
        })
        .setPin("#sixth").addTo(controller);    
        
        var fadeUp06 = TweenMax.to('#sixth', 1, {opacity: 1}); //fade in 3rd photo
                
        var scene = new ScrollMagic.Scene({ 
            triggerElement: '#fade6'
        })
        .setTween(fadeUp06)
        .addTo(controller);

css：

.screen {
    /*position: relative;
    width: 100%;
    z-index: 100;
    float:left;*/
    position: relative;
        width: 100%;
        z-index: 100;
        height: 100vh;
        background-color: transparent;
}

#fifth {
    background: url('../img/swimming/web-pool1981.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0;
}
#sixth {
    background: url('../img/swimming/web-7fo00ki2.jpg') no-repeat center center;
    background-size: cover;
    opacity: 0;
}

ScrollMagic 2.0.7抖动，我将一个屏幕淡入另一个屏幕

0 个答案: