ScrollMagi c: выцветание изображений на фиксированном слое. Refre sh уничтожает сцены - PullRequest
Новая
       89

ScrollMagi c: выцветание изображений на фиксированном слое. Refre sh уничтожает сцены

0 голосов
/ 25 января 2020

У меня есть сайт только с текстом. Затем я поместил фиксированные изображения и установил их непрозрачность на 0 или переместил их влево за пределы экрана. 

#flood {
 width: 100vw;
 bottom: 0;
 left: 0;
 position: fixed;
 z-index: 0;
 opacity: 0;
}

На веб-сайте я установил триггеры для ScrollMagi c. Поэтому, когда пользователь прокручивает до триггера, появится фиксированное изображение. Когда он продолжает прокрутку, он нажимает на другой триггер, снова уменьшая изображение до непрозрачности 0. Затем нажимается следующий триггер, и следующее изображение постепенно исчезает.

Когда вы обновляете sh браузер в начале страницы, с одним или двумя блеклыми изображениями, все работает нормально , Но если я зайду на сайт и перефразирую sh, произойдет следующее: браузер обновится и вернется к последней позиции. Кажется, это вызывает и пропускает некоторые триггеры, и все изображения постепенно исчезают. Но на этом этапе должно быть только одно изображение. Есть идеи, как предотвратить такое поведение? 

function fade(element, from, to) {
            return TweenMax.fromTo(element, 1, {
                opacity: from
            }, {
                opacity: to,
                immediateRender: false,
                overwrite: "auto"
            });
        }

var fadeInFlood = fade("#flood", 0, 1);
var fadeOutFlood = fade("#flood", 1, 0);

var floodInTimeline = new TimelineMax();
floodInTimeline.add(fadeInFlood);
var fadeInFloodScene = new ScrollMagic.Scene({
                triggerElement: "#flood-in",
                duration: "20%"
            }).setTween(floodInTimeline)
              .addTo(controller);

var floodOutTimeline = new TimelineMax();
floodOutTimeline.add(fadeOutFlood);
var fadeOutFloodScene = new ScrollMagic.Scene({
                triggerElement: "#flood-out",
                duration: "20%"
            }).setTween(floodOutTimeline)
              .addTo(controller);
...