ScrollMagi c 2.0.7 дрожит при переходе одного экрана в другой - PullRequest
Новая
       71

ScrollMagi c 2.0.7 дрожит при переходе одного экрана в другой

0 голосов
/ 05 августа 2020

Я использую на своем сайте ScrollMagi c 2.0.7. Я создал блоки под названием «экраны», размер которых равен экрану пользователя. Каждый экран имеет непрозрачность 0, кроме первого экрана. Когда пользователь прокручивает, я заставляю новый экран плавно появляться и держаться, пока не появится следующий экран. Затем следующий экран исчезает и застревает и т. Д.

Проблема в том, что закрепленные экраны дрожат при появлении следующего экрана. Это происходит только на Chrome.

Я искал эту проблему в Google, но не нашел окончательного решения.

Кто-нибудь может помочь?

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>

часть scrollmagi c код: 

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;
}
...