如何解决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 举报,一经查实,本站将立刻删除。