Scrollmagic-延迟文本动画的开始带有视频背景

问题描述

我正在尝试使用Scrollmagic创建一个网站，并且在我滚动视频播放时，标题文本逐渐淡出。然后在滚动/视频的一半左右，我要显示一组不同的文本。在Apple website上有点像。现在，我的标题文字逐渐淡出，但是我无法弄清楚如何延迟动画的开始。我已附上以下代码：

app.js | homeStyles.css | index.html

Serialize

const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('.URIBE2020');
const text2 = intro.querySelector('.RejectB');

//END SECTION
const section = document.querySelector('section');
const end = section.querySelector('h1');
//SCROLL MAJIC
const controller = new ScrollMagic.Controller();

//SCEnes
let scene = new ScrollMagic.Scene({
  duration: 5500,triggerElement: intro,triggerHook: 0.064,})
.addindicators()
.setPin(intro)
.addTo(controller);

//TEXT ANIMATION
const textAnim = TweenMax.fromTo(text,3,{opacity: 1},{opacity: 0});
const textAnim2 = TweenMax.fromTo(text2,{opacity: 0},{opacity: 1});
const textAnim3 = TweenMax.fromTo(text2,{opacity: 0});

let scene2 = new ScrollMagic.Scene({
  duration: 2000,triggerHook: 0.064
})
.addindicators()
.setTween(textAnim)
.addTo(controller);

//VIDEO ANIMATION
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;

scene.on('update',e => {
  scrollpos = e.scrollPos / 100;
});

setInterval(() => {
  delay += (scrollpos - delay) * accelamount;

  video.currentTime = delay;
},66.6)

/*ALL*/
* {
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
}
html {
    height: 100vh;
}

/*SCROLL VIEW*/
.intro{
    height: 100vh;
}
.intro video{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.URIBE2020{
    position: absolute; 
    padding-top: 300px;
    padding-left: 35vw;
    font-size: 80px;
    font-family: Helvetica;
    font-weight: bold;
}

section {
    height: 100vh;
    color: black;
}

.RejectB{
    position: absolute;
    padding-top: 300px;
    padding-left: 7vw;
    height: 100%;
    width: 100%;
    font-size: 60px;
    font-family: Helvetica;
    font-weight: bold;
}




/*HEADER*/
li,a,button {
    font-family: Helvetica;
    font-weight: 100;
    font-size: 14px;
    color: #CECECE;
    text-decoration: none;
}

header {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10%;
    background-color: rgba(0,0.8);
    backdrop-filter: blur(2rem);
    width: 100%;
    z-index: 1;
}
.logo {
    cursor: pointer;
}

.nav__links {
    list-style: none;
}

.nav__links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a {
    transition: all 0.3s ease 0s;
}

.nav__links li a:hover{
    color: #ffffff
}

button {
    padding: 5px 25px;
    background-color: rgba(0,113,227,1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: rgba(0,0.8);
}
.spacer{
    background-color: white;
    padding-top: 46px;
}
/*BODY-ANNOUNCEMENT*/
.announcement {
    padding-top: 11px;
    text-align: center;
    font-family: 'Helvetica';
    font-size: 15px;

    background-color: #0071E3;
    color: white;
    height: 40px;
}
/*BODY-ABOUT*/
.about {
    padding-top: 20px;
    padding-left: 28vw;
    padding-bottom: 20px;
    font-family: 'Helvetica';
    font-weight: bold;
    font-size: 50px;
    background-color: black;
    color: white;
}
/*BODY-POLICIES*/
.policies {
    padding-left: 28vw;
    font-family: 'Helvetica';
    font-size: 12vw;
    color: black;
}
/*BODY-DONATE*/
.donate {
    padding-top: 20px;
    padding-left: 28vw;
    font-family: 'Helvetica';
    font-size: 40px;
    color: black;
    background-color: white;
    font-weight: bold;
}
.donate a {
    font-family: 'Helvetica';
    font-size: 40px;
    color: black;
    font-weight: bold;
    text-decoration: none;

}
.donate a:hover {
    font-family: 'Helvetica';
    font-size: 40px;
    color: black;
    font-weight: bold;
    text-decoration: underline;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）