Javascript Scrollmagic-延迟启动文本动画（带视频背景）
我正在尝试用Scrollmagic创建一个网站，当我滚动一段视频时，标题文本就会消失。然后，在滚动/视频播放到一半时，我希望显示一组不同的文本。有点像在电视上。现在我有了标题文本淡出的部分，但我不知道如何延迟动画的开始。我已附上以下代码： app.js | homeStyles.css | index.htmlJavascript Scrollmagic-延迟启动文本动画（带视频背景）,javascript,html,css,scrollmagic,Javascript,Html,Css,Scrollmagic,我正在尝试用Scrollmagic创建一个网站，当我滚动一段视频时，标题文本就会消失。然后，在滚动/视频播放到一半时，我希望显示一组不同的文本。有点像在电视上。现在我有了标题文本淡出的部分，但我不知道如何延迟动画的开始。我已附上以下代码： app.js | homeStyles.css | index.html const intro=document.querySelector（'.intro'）； const video=intro.querySelector（'video'）； cons
const intro=document.querySelector（'.intro'）；
const video=intro.querySelector（'video'）；
const text=intro.querySelector（'.URIBE2020'）；
const text2=intro.querySelector（'.RejectB'）；
//端部
const section=document.querySelector（'section'）；
const end=section.querySelector（'h1'）；
//卷轴
const controller=new ScrollMagic.controller（）；
//场面
让场景=新的ScrollMagic.scene({
持续时间：5500，
triggerElement：简介，
触发钩：0.064，
})
.addIndicators（）
.setPin（简介）
.addTo（控制员）；
//文本动画
const textAnim=TweenMax.fromTo（text，3，{opacity:1}，{opacity:0}）；
const textAnim2=TweenMax.fromTo（text2，3，{opacity:0}，{opacity:1}）；
const textAnim3=TweenMax.fromTo（text2，3，{opacity:1}，{opacity:0}）；
让scene2=新的ScrollMagic.Scene({
期限：2000年，
triggerElement：简介，
触发钩：0.064
})
.addIndicators（）
.setTween（文本动画）
.addTo（控制员）；
//视频动画
设加速度值=0.1；
设scrollpos=0；
设延迟=0；
场景.on（'update'，e=>{
scrollpos=e.scrollpos/100；
});
设置间隔（（）=>{
延迟+=（scrollpos-延迟）*加速量；
video.currentTime=延迟；
}，66.6）/*全部*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
高度：100vh；
}
/*滚动视图*/
.介绍{
高度：100vh；
}
.介绍视频{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
.URIBE2020{
位置：绝对位置；
填充顶部：300px；
左：35vw；
字号：80px；
字体系列：Helvetica；
字体大小：粗体；
}
部分{
高度：100vh；
颜色：黑色；
}
.拒绝{
位置：绝对位置；
填充顶部：300px；
左：7vw；
身高：100%；
宽度：100%；
字体大小：60px；
字体系列：Helvetica；
字体大小：粗体；
}
/*标题*/
李，一个按钮{
字体系列：Helvetica；
字号：100；
字体大小：14px；
颜色：#CECECE；
文字装饰：无；
}
标题{
位置：固定；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：8px 10%；
背景色：rgba（0,0,0,0.8）；
背景滤镜：模糊（2rem）；
宽度：100%；
z指数：1；
}
.标志{
光标：指针；
}
.导航链接{
列表样式：无；
}
.nav_uu链接李{
显示：内联块；
填充：0px 20px；
}
.nav_uu链接李a{
转换：所有0.3秒到0秒；
}
.导航链接李a:悬停{
颜色：#ffffff
}
钮扣{
填充：5px25px；
背景色：rgba（0，113，227，1）；
边界：无；
边界半径：50px；
光标：指针；
转换：所有0.3秒到0秒；
}
按钮：悬停{
背景色：rgba（0，113，227，0.8）；
}
.垫片{
背景色：白色；
填充顶部：46px；
}
/*身体公告*/
.公告{
填充顶部：11px；
文本对齐：居中；
字体系列：“Helvetica”；
字体大小：15px；
背景色：#0071E3；
颜色：白色；
高度：40px；
}
/*全身*/
.关于{
填充顶部：20px；
左：28vw；
垫底：20px；
字体系列：“Helvetica”；
字体大小：粗体；
字体大小：50px；
背景色：黑色；
颜色：白色；
}
/*机构政策*/
.政策{
左：28vw；
字体系列：“Helvetica”；
字体大小：12vw；
颜色：黑色；
}
/*身体捐献*/
.捐赠{
填充顶部：20px；
左：28vw；
字体系列：“Helvetica”；
字体大小：40px；
颜色：黑色；
背景色：白色；
字体大小：粗体；
}
.捐赠{
字体系列：“Helvetica”；
字体大小：40px；
颜色：黑色；
字体大小：粗体；
文字装饰：无；
}
.捐赠a:悬停{
字体系列：“Helvetica”；
字体大小：40px；
颜色：黑色；
字体大小：粗体；
文字装饰：下划线；
}
Uribe2020
在此向Uribe2020捐款>
URIBE2020
摒弃官僚主义，拥抱现代性
Da底部文本
支持
迭戈·乌里韦
对于
主席
拒绝官僚主义，
拥抱现代
点击捐赠